|
|
@@ -1,172 +1,189 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="title" custom-class="weatherDetails" v-model="dialogVisible" width="800px" :close-on-click-modal="false">
|
|
|
- <div class="weatherMain">
|
|
|
- <el-tabs tab-position="left" style="height: 350px" v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane v-for="(item, index) in messageAll" :key="index" :name="index.toString()">
|
|
|
- <template #label>
|
|
|
- <div class="tabLabel">
|
|
|
- <p>{{item.name}}</p>
|
|
|
- <p>{{item.data[0].name}}</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="tabMain">
|
|
|
- <img :src="item.data[0].img" alt="">
|
|
|
- <div class="tabMain_msg">
|
|
|
- <div class="detailsMsg">{{item.data[0].msg}}</div>
|
|
|
- <div class="detailsTime">
|
|
|
- <div class="detailN">
|
|
|
- <span>预警时间:</span>
|
|
|
- <span>{{item.weather.update_time}};</span>
|
|
|
- </div>
|
|
|
+ <el-dialog :title="title" class="weatherDetails" v-model="dialogVisible" width="800px"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div class="weatherMain">
|
|
|
+ <el-tabs tab-position="left" style="height: 350px" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane v-for="(item, index) in messageAll" :key="index" :name="index.toString()">
|
|
|
+ <template #label>
|
|
|
+ <div class="tabLabel">
|
|
|
+ <p>{{item.name}}</p>
|
|
|
+ <p>{{item.data[0].name}}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="tabMain">
|
|
|
+ <img :src="item.data[0].img" alt="">
|
|
|
+ <div class="tabMain_msg">
|
|
|
+ <div class="detailsMsg">{{item.data[0].msg}}</div>
|
|
|
+ <div class="detailsTime">
|
|
|
+ <div class="detailN">
|
|
|
+ <span>预警时间:</span>
|
|
|
+ <span>{{item.weather.update_time}};</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="detailsTime">
|
|
|
- <div class="detailN">
|
|
|
- <span>温度:</span>
|
|
|
- <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
|
|
|
- </div>
|
|
|
- <div class="detailN">
|
|
|
- <span>湿度:</span>
|
|
|
- <span>{{item.weather.humidity}}%;</span>
|
|
|
- </div>
|
|
|
- <div class="detailN">
|
|
|
- <span>气压:</span>
|
|
|
- <span>{{item.weather.pressure}}kPa;</span>
|
|
|
- </div>
|
|
|
- <div class="detailN">
|
|
|
- <span>风力:</span>
|
|
|
- <span>{{item.weather.wind_power}};</span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="detailsTime">
|
|
|
+ <div class="detailN">
|
|
|
+ <span>温度:</span>
|
|
|
+ <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
|
|
|
+ </div>
|
|
|
+ <div class="detailN">
|
|
|
+ <span>湿度:</span>
|
|
|
+ <span>{{item.weather.humidity}}%;</span>
|
|
|
+ </div>
|
|
|
+ <div class="detailN">
|
|
|
+ <span>气压:</span>
|
|
|
+ <span>{{item.weather.pressure}}kPa;</span>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ <div class="detailN">
|
|
|
+ <span>风力:</span>
|
|
|
+ <span>{{item.weather.wind_power}};</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-//大风预警图片
|
|
|
-import windBlue from '@/assets/weather/windBlue.png'
|
|
|
-import windYellow from '@/assets/weather/windYellow.png'
|
|
|
-import windOrange from '@/assets/weather/windOrange.png'
|
|
|
-import windRed from '@/assets/weather/windRed.png'
|
|
|
-//暴雨预警图片
|
|
|
-import rainBlue from '@/assets/weather/rainBlue.png'
|
|
|
-import rainYellow from '@/assets/weather/rainYellow.png'
|
|
|
-import rainOrange from '@/assets/weather/rainOrange.png'
|
|
|
-import rainRed from '@/assets/weather/rainRed.png'
|
|
|
-//雷电预警图片
|
|
|
-import thunderYellow from '@/assets/weather/thunderYellow.png'
|
|
|
-import thunderOrange from '@/assets/weather/thunderOrange.png'
|
|
|
-import thunderRed from '@/assets/weather/thunderRed.png'
|
|
|
-//暴雪预警图片
|
|
|
-import snowBlue from '@/assets/weather/snowBlue.png'
|
|
|
-import snowYellow from '@/assets/weather/snowYellow.png'
|
|
|
-import snowOrange from '@/assets/weather/snowOrange.png'
|
|
|
-import snowRed from '@/assets/weather/snowRed.png'
|
|
|
-//正常天气
|
|
|
-import sunshine from '@/assets/weather/sunshine.png'
|
|
|
-import overcast from '@/assets/weather/overcast.png'
|
|
|
-import cloudy from '@/assets/weather/cloudy.png'
|
|
|
-import rain from '@/assets/weather/rain.png'
|
|
|
-import snow from '@/assets/weather/snow.png'
|
|
|
-import thunder from '@/assets/weather/thunder.png'
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dialogVisible: false,
|
|
|
- title: '',
|
|
|
- messageAll: [],
|
|
|
- activeName: '',
|
|
|
- statusName: ''
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- this.activeName = tab.props.name
|
|
|
+ //大风预警图片
|
|
|
+ import windBlue from '@/assets/weather/windBlue.png'
|
|
|
+ import windYellow from '@/assets/weather/windYellow.png'
|
|
|
+ import windOrange from '@/assets/weather/windOrange.png'
|
|
|
+ import windRed from '@/assets/weather/windRed.png'
|
|
|
+ //暴雨预警图片
|
|
|
+ import rainBlue from '@/assets/weather/rainBlue.png'
|
|
|
+ import rainYellow from '@/assets/weather/rainYellow.png'
|
|
|
+ import rainOrange from '@/assets/weather/rainOrange.png'
|
|
|
+ import rainRed from '@/assets/weather/rainRed.png'
|
|
|
+ //雷电预警图片
|
|
|
+ import thunderYellow from '@/assets/weather/thunderYellow.png'
|
|
|
+ import thunderOrange from '@/assets/weather/thunderOrange.png'
|
|
|
+ import thunderRed from '@/assets/weather/thunderRed.png'
|
|
|
+ //暴雪预警图片
|
|
|
+ import snowBlue from '@/assets/weather/snowBlue.png'
|
|
|
+ import snowYellow from '@/assets/weather/snowYellow.png'
|
|
|
+ import snowOrange from '@/assets/weather/snowOrange.png'
|
|
|
+ import snowRed from '@/assets/weather/snowRed.png'
|
|
|
+ //正常天气
|
|
|
+ import sunshine from '@/assets/weather/sunshine.png'
|
|
|
+ import overcast from '@/assets/weather/overcast.png'
|
|
|
+ import cloudy from '@/assets/weather/cloudy.png'
|
|
|
+ import rain from '@/assets/weather/rain.png'
|
|
|
+ import snow from '@/assets/weather/snow.png'
|
|
|
+ import thunder from '@/assets/weather/thunder.png'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ title: '',
|
|
|
+ messageAll: [],
|
|
|
+ activeName: '',
|
|
|
+ statusName: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ this.activeName = tab.props.name
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.el-overlay{
|
|
|
- .el-overlay-dialog{
|
|
|
- .weatherDetails{
|
|
|
- .weatherMain{
|
|
|
- .el-tabs{
|
|
|
- .el-tabs__header{
|
|
|
- min-width: 80px;
|
|
|
- .el-tabs__nav-wrap{
|
|
|
- .el-tabs__nav-prev{
|
|
|
- .el-icon{
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
+ .el-overlay {
|
|
|
+ .el-overlay-dialog {
|
|
|
+ .weatherDetails {
|
|
|
+
|
|
|
+ .weatherMain {
|
|
|
+ .el-tabs {
|
|
|
+ .el-tabs__header {
|
|
|
+ min-width: 80px;
|
|
|
+
|
|
|
+ .el-tabs__nav-wrap {
|
|
|
+ .el-tabs__nav-prev {
|
|
|
+ .el-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .el-tabs__nav-next{
|
|
|
- .el-icon{
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .el-tabs__nav-next {
|
|
|
+ .el-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .el-tabs__item{
|
|
|
- height: 60px;
|
|
|
- .tabLabel{
|
|
|
- p{
|
|
|
- margin: 0;
|
|
|
- line-height: 25px;
|
|
|
+
|
|
|
+ .el-tabs__item {
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ .tabLabel {
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .el-tabs__content{
|
|
|
- .tabMain{
|
|
|
- display: flex;
|
|
|
- img{
|
|
|
- width: 180px;
|
|
|
- height: 180px;
|
|
|
- margin: 30px 0 0 20px;
|
|
|
- }
|
|
|
- .tabMain_msg{
|
|
|
- margin: 30px 0 0 20px;
|
|
|
- .detailsMsg{
|
|
|
+
|
|
|
+ .el-tabs__content {
|
|
|
+ .tabMain {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 180px;
|
|
|
height: 180px;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 30px;
|
|
|
- text-indent: 2em;
|
|
|
+ margin: 30px 0 0 20px;
|
|
|
}
|
|
|
- .detailsTime{
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 18px;
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- .detailN{
|
|
|
- margin-right: 20px;
|
|
|
- span:nth-of-type(1){
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .tabMain_msg {
|
|
|
+ margin: 30px 0 0 20px;
|
|
|
+
|
|
|
+ .detailsMsg {
|
|
|
+ height: 180px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailsTime {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+
|
|
|
+ .detailN {
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .detailsTime{
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 18px;
|
|
|
- .detailN{
|
|
|
- margin-right: 20px;
|
|
|
- span:nth-of-type(1){
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .detailsTime {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ .detailN {
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -175,5 +192,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
