|
|
@@ -7,10 +7,10 @@
|
|
|
<span>风力</span>
|
|
|
<span>日照时长</span>
|
|
|
</section>
|
|
|
- <section style="cursor: pointer" :class="currentcityId==item.id?'active':''" @click="currentcityId=item.id, currentcityName=item.name" v-for="(item, index) in cityList" :key="index">
|
|
|
- <span>{{item.name}}</span>
|
|
|
- <span>{{item.windpower}}</span>
|
|
|
- <span>{{item.sunshineDuration}}</span>
|
|
|
+ <section style="cursor: pointer" :class="currentcityId == item.id ? 'active' : ''" @click="currentcityId = item.id, currentcityName = item.name" v-for="(item, index) in cityList" :key="index">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>{{ item.windpower }}</span>
|
|
|
+ <span>{{ item.sunshineDuration }}</span>
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -19,35 +19,30 @@
|
|
|
<el-col>
|
|
|
<div class="weather-info">
|
|
|
<section>
|
|
|
- <span class="temperature">{{oneCityInfo.Temperature}}℃</span>
|
|
|
+ <span class="temperature">{{ oneCityInfo.Temperature }}℃</span>
|
|
|
<img :src="weatherObj[oneCityInfo.weather]" alt="">
|
|
|
- <span class="weather">{{oneCityInfo.weather}}</span>
|
|
|
- <span>{{oneCityInfo.reporttime}}更新</span>
|
|
|
+ <span class="weather">{{ oneCityInfo.weather }}</span>
|
|
|
+ <span>{{ oneCityInfo.reporttime }}更新</span>
|
|
|
|
|
|
</section>
|
|
|
<section>
|
|
|
- <span style="margin-right: 20px;">地点：{{currentcityName}}</span>
|
|
|
- <img src="../../assets/img/windPowerIcon.svg" alt="">
|
|
|
- <span>风力: {{oneCityInfo.winddirection+oneCityInfo.windpower}}</span>
|
|
|
- <img class="sunset-sunrise" src="../../assets/img/sunset.svg" alt="">
|
|
|
- <span class="sunset">日出时间: {{oneCityInfo.sunrise}}</span>
|
|
|
- <span>日落时间: {{oneCityInfo.sunset}}</span>
|
|
|
+ <span style="margin-right: 20px;">地点：{{ currentcityName }}</span>
|
|
|
+ <img src="/@/assets/img/windPowerIcon.svg" alt="">
|
|
|
+ <span>风力: {{ oneCityInfo.winddirection + oneCityInfo.windpower }}</span>
|
|
|
+ <img class="sunset-sunrise" src="/@/assets/img/sunset.svg" alt="">
|
|
|
+ <span class="sunset">日出时间: {{ oneCityInfo.sunrise }}</span>
|
|
|
+ <span>日落时间: {{ oneCityInfo.sunset }}</span>
|
|
|
</section>
|
|
|
</div>
|
|
|
- </el-col >
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="15" class="home-card-two mb15">
|
|
|
- <el-col >
|
|
|
+ <el-col>
|
|
|
<div class="home-card-item">
|
|
|
<div class="home-card-item-title">
|
|
|
- <span>温度 监测图表</span>
|
|
|
+ <span>温度 监测图表</span>
|
|
|
<el-select @change="getTemperatureEchartById(currentcityId)" v-model="temperatureType" placeholder="请选择查询范围" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in ranges"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
+ <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div style="height: 100%" ref="homeTemLineRef"></div>
|
|
|
@@ -58,14 +53,9 @@
|
|
|
<el-col>
|
|
|
<div class="home-card-item">
|
|
|
<div class="home-card-item-title">
|
|
|
- <span>风力 监测图表</span>
|
|
|
+ <span>风力 监测图表</span>
|
|
|
<el-select @change="getWindpowerEchartById(currentcityId)" v-model="windpowerType" placeholder="请选择查询范围" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in ranges"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
+ <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div style="height: 100%" ref="homeWindLineRef"></div>
|
|
|
@@ -172,9 +162,9 @@ export default defineComponent({
|
|
|
});
|
|
|
// 获取左侧数据
|
|
|
const getCityWeatherList = () => {
|
|
|
- api.weather.getCityWeatherList().then((res:any) => {
|
|
|
+ api.weather.getCityWeatherList().then((res: any) => {
|
|
|
state.cityList = res.Info;
|
|
|
- if(!res.Info.length) return;
|
|
|
+ if (!res.Info.length) return;
|
|
|
state.currentcityId = res.Info[0].id;
|
|
|
state.currentcityName = res.Info[0].name;
|
|
|
});
|
|
|
@@ -182,18 +172,18 @@ export default defineComponent({
|
|
|
|
|
|
// 根据ID获取指定城市的风力图表
|
|
|
const getWindpowerEchartById = (id: number) => {
|
|
|
- api.weather.getWindpowerEchartById({id: id, types: state.windpowerType}).then((res:any) => {
|
|
|
+ api.weather.getWindpowerEchartById({ id: id, types: state.windpowerType }).then((res: any) => {
|
|
|
const { AvgInfo, Info } = res;
|
|
|
state.xAxisWind = [];
|
|
|
state.temWind = [];
|
|
|
state.averageTemWind = [];
|
|
|
- if(Info && Info.length) {
|
|
|
+ if (Info && Info.length) {
|
|
|
Info.forEach((i: any) => {
|
|
|
state.xAxisWind.push(i.time);
|
|
|
state.temWind.push(i.value);
|
|
|
})
|
|
|
}
|
|
|
- if(AvgInfo && AvgInfo.length) {
|
|
|
+ if (AvgInfo && AvgInfo.length) {
|
|
|
AvgInfo.forEach((i: any) => {
|
|
|
state.averageTemWind.push(i.value)
|
|
|
})
|
|
|
@@ -206,18 +196,18 @@ export default defineComponent({
|
|
|
|
|
|
// 根据ID获取指定城市的温度图表
|
|
|
const getTemperatureEchartById = (id: number) => {
|
|
|
- api.weather.getTemperatureEchartById({id: id, types: state.temperatureType}).then((res:any) => {
|
|
|
+ api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
|
|
|
const { AvgInfo, Info } = res;
|
|
|
state.xAxis = [];
|
|
|
state.tem = [];
|
|
|
state.averageTem = [];
|
|
|
- if(Info && Info.length) {
|
|
|
+ if (Info && Info.length) {
|
|
|
Info.forEach((i: any) => {
|
|
|
state.xAxis.push(i.time);
|
|
|
state.tem.push(i.value);
|
|
|
})
|
|
|
}
|
|
|
- if(AvgInfo && AvgInfo.length) {
|
|
|
+ if (AvgInfo && AvgInfo.length) {
|
|
|
AvgInfo.forEach((i: any) => {
|
|
|
state.averageTem.push(i.value)
|
|
|
})
|
|
|
@@ -230,7 +220,7 @@ export default defineComponent({
|
|
|
|
|
|
// 获取顶部天气数据
|
|
|
const getWhichCityWeather = (id: number) => {
|
|
|
- api.weather.getWhichCityWeather({id: id}).then((res:any) => {
|
|
|
+ api.weather.getWhichCityWeather({ id: id }).then((res: any) => {
|
|
|
state.oneCityInfo = res.Info
|
|
|
});
|
|
|
};
|
|
|
@@ -251,8 +241,8 @@ export default defineComponent({
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- axisLabel:{
|
|
|
- formatter:"{value}℃"
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}℃"
|
|
|
},
|
|
|
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
|
|
},
|
|
|
@@ -331,8 +321,8 @@ export default defineComponent({
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- axisLabel:{
|
|
|
- formatter:"{value}级"
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}级"
|
|
|
},
|
|
|
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
|
|
},
|
|
|
@@ -472,21 +462,26 @@ export default defineComponent({
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
$homeNavLengh: 8;
|
|
|
+
|
|
|
.monitor-weather {
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
|
+
|
|
|
.left {
|
|
|
width: 384px;
|
|
|
height: 500px;
|
|
|
+
|
|
|
.city-weather-data-overview-wrap {
|
|
|
border: 1px solid #F2F2F2;
|
|
|
+
|
|
|
section.title {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #1A1A1A;
|
|
|
}
|
|
|
+
|
|
|
section {
|
|
|
padding: 20px 0;
|
|
|
|
|
|
@@ -495,63 +490,80 @@ $homeNavLengh: 8;
|
|
|
width: 33%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
span:nth-child(2) {
|
|
|
border-left: 1px solid #F2F2F2;
|
|
|
border-right: 1px solid #F2F2F2;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
section:nth-child(2n) {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
section:nth-child(2n+1) {
|
|
|
background-color: #f8f8f8;
|
|
|
}
|
|
|
+
|
|
|
section.active {
|
|
|
background: var(--el-color-primary-light-9);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.right {
|
|
|
width: calc(100% - 384px);
|
|
|
height: 100%;
|
|
|
margin-left: 47px;
|
|
|
+
|
|
|
.weather-info {
|
|
|
padding: 15px 30px 15px 30px;
|
|
|
background: var(--el-color-white);
|
|
|
color: var(--el-text-color-primary);
|
|
|
border: 1px solid var(--next-border-color-light);
|
|
|
+
|
|
|
section:nth-child(1) {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
+
|
|
|
section {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.temperature {
|
|
|
font-size: 50px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
margin: 0 10px 0 30px;
|
|
|
}
|
|
|
+
|
|
|
.weather {
|
|
|
margin-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
width: 24px;
|
|
|
}
|
|
|
+
|
|
|
.sunset-sunrise {
|
|
|
margin: 0 8xpx 0 47px;
|
|
|
}
|
|
|
+
|
|
|
.sunset {
|
|
|
margin-right: 40px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.home-card-two,
|
|
|
.home-card-three {
|
|
|
- .home-card-item,.home-card-top {
|
|
|
+
|
|
|
+ .home-card-item,
|
|
|
+ .home-card-top {
|
|
|
width: 100%;
|
|
|
height: 130px;
|
|
|
border-radius: 4px;
|
|
|
@@ -561,19 +573,23 @@ $homeNavLengh: 8;
|
|
|
background: var(--el-color-white);
|
|
|
color: var(--el-text-color-primary);
|
|
|
border: 1px solid var(--next-border-color-light);
|
|
|
+
|
|
|
&:hover {
|
|
|
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
transition: all ease 0.3s;
|
|
|
}
|
|
|
+
|
|
|
&-icon {
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
border-radius: 100%;
|
|
|
flex-shrink: 1;
|
|
|
+
|
|
|
i {
|
|
|
color: var(--el-text-color-placeholder);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-title {
|
|
|
font-size: 15px;
|
|
|
font-weight: bold;
|
|
|
@@ -581,6 +597,7 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// .home-card-one {
|
|
|
// @for $i from 0 through 3 {
|
|
|
// .home-one-animation#{$i} {
|
|
|
@@ -597,6 +614,7 @@ $homeNavLengh: 8;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
// .home-card-one .home-card-item {
|
|
|
// width: 100%;
|
|
|
// border-radius: 4px;
|
|
|
@@ -650,26 +668,39 @@ $homeNavLengh: 8;
|
|
|
|
|
|
.home-card-two,
|
|
|
.home-card-three {
|
|
|
- .home-card-item{
|
|
|
- height: 500px;
|
|
|
- }
|
|
|
- .home-card-top{
|
|
|
- height: 250px;
|
|
|
- .box-card{
|
|
|
- padding: 15px 20px 20px 20px;
|
|
|
- p{margin-bottom: 10px;}
|
|
|
- &-item{margin-bottom: 20px;}
|
|
|
- }
|
|
|
- }
|
|
|
- .home-card-item, .home-card-top{
|
|
|
+ .home-card-item {
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-top {
|
|
|
+ height: 250px;
|
|
|
+
|
|
|
+ .box-card {
|
|
|
+ padding: 15px 20px 20px 20px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-item,
|
|
|
+ .home-card-top {
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.home-monitor {
|
|
|
height: 100%;
|
|
|
+
|
|
|
.flex-warp-item {
|
|
|
width: 25%;
|
|
|
height: 111px;
|
|
|
display: flex;
|
|
|
+
|
|
|
.flex-warp-item-box {
|
|
|
margin: auto;
|
|
|
text-align: center;
|
|
|
@@ -679,11 +710,13 @@ $homeNavLengh: 8;
|
|
|
background: var(--next-bg-color);
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
+
|
|
|
&:hover {
|
|
|
background: var(--el-color-primary-light-9);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@for $i from 0 through $homeNavLengh {
|
|
|
.home-animation#{$i} {
|
|
|
opacity: 0;
|
|
|
@@ -697,27 +730,46 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .text-info{color: #23c6c8;}
|
|
|
- .text-danger{color:#ed5565;}
|
|
|
-
|
|
|
- .git-res{
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .git-res .el-link{
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
- ul,li{ padding:0;margin:0;list-style:none}
|
|
|
- .product{
|
|
|
- margin-top: 50px;
|
|
|
- h3{margin-bottom: 15px;}
|
|
|
- }
|
|
|
- .product li{
|
|
|
- margin-bottom: 20px;
|
|
|
- float: left;
|
|
|
- width: 150px;
|
|
|
- }
|
|
|
- .box-card.xx{
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ color: #23c6c8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-danger {
|
|
|
+ color: #ed5565;
|
|
|
+ }
|
|
|
+
|
|
|
+ .git-res {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .git-res .el-link {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none
|
|
|
+ }
|
|
|
+
|
|
|
+ .product {
|
|
|
+ margin-top: 50px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product li {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ float: left;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card.xx {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
