<template>
|
<div id="weather">
|
<div>
|
<el-row>
|
<el-col :span="8" class="el-col1">
|
<div class="sun" title="晴天" @click="weather('sun')"></div>
|
</el-col>
|
<el-col :span="8">
|
<div class="rain" title="雨天" @click="weather('rain')"></div>
|
</el-col>
|
<el-col :span="8" class="el-col3">
|
<div class="snow" title="雪天" @click="weather('snow')"></div>
|
</el-col>
|
</el-row>
|
<div class="bar">
|
<div
|
class="barpoint"
|
:class="{
|
sunPoint: data.currentType == 'sun',
|
rainPoint: data.currentType == 'rain',
|
snowPoint: data.currentType == 'snow',
|
}"
|
></div>
|
</div>
|
</div>
|
|
<!-- <div class="time-box">
|
<div class="title">选择时间</div>
|
<div style="width: 80%">
|
<time-box :state="data.timestatus" @changeTime="changeTime"></time-box>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { reactive, onMounted, watch } from "vue";
|
import timeBox from "@/components/time.vue";
|
import { queryWeatherList } from "@/api/api.js";
|
import axios from "axios";
|
export default {
|
components: { timeBox },
|
props: ["weatherData"],
|
created() {},
|
mounted() {
|
// var tem = window.sessionStorage.getItem("weatherType");
|
// if(tem){
|
// this.currentType=tem;
|
// };
|
},
|
setup(props, { emit }) {
|
let data = reactive({
|
currentType: undefined,
|
timestatus: "",
|
});
|
// 设置天气
|
function weather(type) {
|
window.sgworld.Analysis.createWeather(type, true);
|
// sgworld.Core.postMessage({"weather":type})
|
data.currentType = type;
|
// if (type == data.currentType) {
|
// window.sgworld.Analysis.createWeather("snow", true);
|
// data.currentType = undefined;
|
// } else {
|
// window.sgworld.Analysis.createWeather(type, true);
|
// data.currentType = type;
|
// }
|
// window.sessionStorage.setItem("weatherType", data.currentType);
|
}
|
|
//天气获取接口
|
// async function queryWeather(time) {
|
// let arr = time.split(/\s+/);
|
// let Hour = arr[1].split(":");
|
// let headers = { "Cache-Control": "no-cache" };
|
// const dt = await axios.get(
|
// `${jsonUrl}/json/yssh_weather.json`,
|
// {},
|
// headers
|
// );
|
|
// dt.data.forEach((e) => {
|
// if (e.time == `${arr[0]}-${Hour[0]}:00:00`) {
|
// emit("changeWeather", e);
|
// switch (e.weatherCondition) {
|
// case "Sunny":
|
// weather("sun");
|
// break;
|
// case "snowy":
|
// weather("snow");
|
// break;
|
// case "wet":
|
// weather("rain");
|
// break;
|
// }
|
// }
|
// });
|
// }
|
function changeTime(val) {
|
// queryWeather(val.data);
|
emit("timeData", val);
|
}
|
watch(
|
() => props.weatherData,
|
(nVal, oVal) => {
|
data.currentType = nVal;
|
weather(nVal);
|
},
|
{ deep: true }
|
);
|
onMounted(() => {
|
data.timestatus = "t";
|
});
|
return { data, weather, changeTime };
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
|
#weather {
|
width: 650px;
|
position: absolute;
|
z-index: 10;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.box {
|
// width: 500px;
|
// margin: 0 auto;
|
}
|
.el-button {
|
font-size: 30px;
|
}
|
.bar {
|
// width: 98%;
|
height: 20px;
|
line-height: 20px;
|
margin-left: 15px;
|
margin-top: 20px;
|
border-radius: 10px;
|
position: relative;
|
background: linear-gradient(
|
to right,
|
rgba(0, 132, 255, 0.25),
|
rgba(0, 132, 255, 1)
|
) !important;
|
}
|
|
.barpoint {
|
position: absolute;
|
width: 36px;
|
height: 36px;
|
top: -8px;
|
left: 0;
|
border-radius: 18px;
|
/* border: 1px solid white; */
|
background: white;
|
}
|
.sunPoint {
|
left: 0;
|
}
|
.rainPoint {
|
left: 45%;
|
}
|
.snowPoint {
|
left: unset;
|
right: 0;
|
}
|
.sun,
|
.rain,
|
.snow {
|
width: 63px;
|
height: 66px;
|
background: url("../assets/img/sun.png") no-repeat center;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
.rain {
|
background: url("../assets/img/rain.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.snow {
|
background: url("../assets/img/snow.png") no-repeat center;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
.time-box {
|
width: 100%;
|
margin-top: 40px;
|
// width: 500px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.title {
|
color: white;
|
font-size: 20px;
|
// margin-bottom: 20px;
|
}
|
}
|
.el-col {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.el-col1 {
|
justify-content: flex-start;
|
}
|
.el-col3 {
|
justify-content: flex-end;
|
}
|
</style>
|
