|
@@ -3,32 +3,35 @@
|
|
|
<div class="top-box">
|
|
|
<div class="left">
|
|
|
<img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
|
|
|
- <img class="weather-icon" :src="parseImgUrl('pac', 'weather/sunny.png')" />
|
|
|
+ <img
|
|
|
+ class="weather-icon"
|
|
|
+ :src="parseImgUrl('pac', 'weather/' + outWeather.imgname)"
|
|
|
+ />
|
|
|
<div class="wether-info">
|
|
|
- <div class="temp">-3 ℃</div>
|
|
|
- <div class="text">中雨</div>
|
|
|
+ <div class="temp">{{ outWeather.temperature }} ℃</div>
|
|
|
+ <div class="text">{{ outWeather.text }}</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="wether-pm">
|
|
|
<div class="value-box">
|
|
|
<span>PM 2.5</span>
|
|
|
- <span>16</span>
|
|
|
+ <span>{{ outWeather.pm25 ? outWeather.pm25 : "--" }}</span>
|
|
|
</div>
|
|
|
<div class="value-des">
|
|
|
<span>室外空气质量</span>
|
|
|
- <span>优</span>
|
|
|
+ <span>{{ outWeather.quality ? outWeather.quality : "--" }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <div class="env-box" v-for="item in titleList">
|
|
|
+ <div class="env-box" v-for="item in envlist">
|
|
|
<div class="title-box">
|
|
|
<img class="icon" :src="item.img" />
|
|
|
<div class="title">{{ item.name }}</div>
|
|
|
</div>
|
|
|
<div class="index-box">
|
|
|
- <div class="num">{{ item.value }}</div>
|
|
|
- <div class="text">{{ item.level }}</div>
|
|
|
+ <div class="num">{{ item.num }}</div>
|
|
|
+ <div class="text">{{ item.levelTxt }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -46,17 +49,18 @@ import {
|
|
|
ref,
|
|
|
onBeforeUnmount,
|
|
|
} from "vue";
|
|
|
-import { parseImgUrl } from "@/utils";
|
|
|
+import { parseImgUrl, setQueryConfig } from "@/utils";
|
|
|
+import { getWeatherNew, getPacSpaceInfo } from "@/apis/envmonitor";
|
|
|
export default defineComponent({
|
|
|
components: {},
|
|
|
setup(props) {
|
|
|
- const titleList = [
|
|
|
+ const envlist = [
|
|
|
{
|
|
|
id: 1,
|
|
|
name: "PM 2.5",
|
|
|
unit: "ug/m³",
|
|
|
funcid: "PM2d5",
|
|
|
- level: "优",
|
|
|
+ levelTxt: "",
|
|
|
value: 10,
|
|
|
img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
|
|
@@ -66,34 +70,199 @@ export default defineComponent({
|
|
|
value: 10,
|
|
|
name: "甲醛",
|
|
|
unit: "mg/㎡",
|
|
|
- level: "",
|
|
|
- img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ levelTxt: "",
|
|
|
+ img: parseImgUrl("pac", "HCHO.svg"),
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
value: 10,
|
|
|
name: "温度",
|
|
|
unit: "%",
|
|
|
- level: "",
|
|
|
+ levelTxt: "",
|
|
|
funcid: "Tdb,RH",
|
|
|
- img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ img: parseImgUrl("pac", "Tdb.svg"),
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
value: 10,
|
|
|
name: "湿度",
|
|
|
- level: "",
|
|
|
+ levelTxt: "",
|
|
|
unit: "%",
|
|
|
funcid: "Tdb,RH",
|
|
|
- img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ img: parseImgUrl("pac", "RH.svg"),
|
|
|
},
|
|
|
];
|
|
|
const proxyData = reactive({
|
|
|
- titleList: titleList,
|
|
|
+ envlist: envlist,
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
+ params: {
|
|
|
+ spaceId: "Sp31010600032517f22f3d6a4c71b18cab24c444d362",
|
|
|
+ pubname: "sagacarepad",
|
|
|
+ projectId: "Pj3101060003",
|
|
|
+ },
|
|
|
+ outWeather: {},
|
|
|
+ getWeatherIconByText(text) {
|
|
|
+ let imgname = "晴.png";
|
|
|
+ if (text.indexOf("晴") > -1) {
|
|
|
+ imgname = "晴.png";
|
|
|
+ } else if (text.indexOf("雨") > -1) {
|
|
|
+ imgname = "大雨.png";
|
|
|
+ } else if (text.indexOf("阴") > -1 || text.indexOf("云") > -1) {
|
|
|
+ imgname = "阴.png";
|
|
|
+ } else if (text.indexOf("霾") > -1) {
|
|
|
+ imgname = "雾.png";
|
|
|
+ } else if (text.indexOf("雾") > -1) {
|
|
|
+ imgname = "雾.png";
|
|
|
+ } else if (text.indexOf("风") > -1) {
|
|
|
+ imgname = "风.png";
|
|
|
+ } else if (text.indexOf("雷") > -1) {
|
|
|
+ imgname = "雷阵雨.png";
|
|
|
+ }
|
|
|
+ return imgname;
|
|
|
+ },
|
|
|
+ getWeatherIconByCode(code) {
|
|
|
+ let imgname = "";
|
|
|
+ if (code <= 3) {
|
|
|
+ imgname = "晴.png";
|
|
|
+ } else if (code <= 8) {
|
|
|
+ imgname = "多云.png";
|
|
|
+ } else if (code <= 9) {
|
|
|
+ imgname = "阴.png";
|
|
|
+ } else if (code <= 10) {
|
|
|
+ imgname = "阵雨.png";
|
|
|
+ } else if (code <= 12) {
|
|
|
+ imgname = "雷阵雨.png";
|
|
|
+ } else if (code <= 13) {
|
|
|
+ imgname = "小雨.png";
|
|
|
+ } else if (code <= 15) {
|
|
|
+ imgname = "大雨.png";
|
|
|
+ } else if (code <= 18) {
|
|
|
+ imgname = "暴雨.png";
|
|
|
+ } else if (code <= 19) {
|
|
|
+ // 冻雨
|
|
|
+ imgname = "小雨.png";
|
|
|
+ } else if (code <= 20) {
|
|
|
+ imgname = "雨夹雪.png";
|
|
|
+ } else if (code <= 25) {
|
|
|
+ imgname = "雪.png";
|
|
|
+ } else if (code <= 29) {
|
|
|
+ imgname = "阴.png";
|
|
|
+ } else if (code <= 31) {
|
|
|
+ imgname = "雾.png";
|
|
|
+ } else if (code <= 35) {
|
|
|
+ imgname = "风.png";
|
|
|
+ } else if (code <= 36) {
|
|
|
+ imgname = "龙卷风.png";
|
|
|
+ } else if (code <= 37) {
|
|
|
+ // 冷
|
|
|
+ imgname = "阴.png";
|
|
|
+ } else if (code <= 38) {
|
|
|
+ // 热
|
|
|
+ imgname = "晴.png";
|
|
|
+ }
|
|
|
+ return imgname;
|
|
|
+ },
|
|
|
+ getWeatherInfo() {
|
|
|
+ const str = setQueryConfig(proxyData.params);
|
|
|
+ getWeatherNew(str).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ proxyData.outWeather = res.content ? res.content : {};
|
|
|
+ let text = proxyData.outWeather.text || "";
|
|
|
+ let code = proxyData.outWeather.code;
|
|
|
+ let imgname = proxyData.getWeatherIconByCode(code);
|
|
|
+ if (!imgname) {
|
|
|
+ imgname = proxyData.getWeatherIconByText(text);
|
|
|
+ }
|
|
|
+ console.log("imgname==", imgname);
|
|
|
+
|
|
|
+ proxyData.outWeather.imgname = imgname;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getSpaceInfo() {
|
|
|
+ const str = setQueryConfig(proxyData.params);
|
|
|
+ getPacSpaceInfo({ criteria: proxyData.params }).then((res) => {
|
|
|
+ const content = (res && res.content) || [];
|
|
|
+ proxyData.formatSpaceInfo(content);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ formatSpaceInfo(content = []) {
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ let item = content[i];
|
|
|
+ if (item.pm25 || item.pm25 === 0) {
|
|
|
+ let obj = proxyData.checkLevel(item.pm25, "pm25");
|
|
|
+ // console.log("obj==", obj);
|
|
|
+ proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : "--";
|
|
|
+ proxyData.envlist[0].num = item.pm25;
|
|
|
+ } else {
|
|
|
+ proxyData.envlist[0].levelTxt = "";
|
|
|
+ proxyData.envlist[0].num = "--";
|
|
|
+ }
|
|
|
+ if (item.hcho || item.hcho == 0) {
|
|
|
+ let obj = proxyData.checkLevel(item.hcho, "hcho");
|
|
|
+ // proxyData.envlist[1].levelTxt = obj.levelTxt;
|
|
|
+ proxyData.envlist[1].num = item.hcho;
|
|
|
+ } else {
|
|
|
+ // proxyData.envlist[1].levelTxt = "";
|
|
|
+ proxyData.envlist[1].num = "--";
|
|
|
+ }
|
|
|
+ if (item.temperature || item.temperature == 0) {
|
|
|
+ proxyData.envlist[2].num = item.temperature;
|
|
|
+ }
|
|
|
+ if (item.humidity || item.humidity == 0) {
|
|
|
+ let obj = proxyData.checkLevel(item.humidity, "humidity");
|
|
|
+ // proxyData.envlist[3].levelTxt = obj.levelTxt;
|
|
|
+ proxyData.envlist[3].num = item.humidity;
|
|
|
+ } else {
|
|
|
+ proxyData.envlist[3].num = "--";
|
|
|
+ proxyData.envlist[3].levelTxt = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkLevel(value, name) {
|
|
|
+ let levelTxt = "";
|
|
|
+ let valueNum = parseFloat(value);
|
|
|
+ if (name == "humidity") {
|
|
|
+ if (valueNum < 30) {
|
|
|
+ levelTxt = "干燥";
|
|
|
+ } else if (valueNum > 70) {
|
|
|
+ levelTxt = "潮湿";
|
|
|
+ } else {
|
|
|
+ levelTxt = "健康";
|
|
|
+ }
|
|
|
+ } else if (name == "pm25") {
|
|
|
+ if (valueNum >= 0 && valueNum < 35) {
|
|
|
+ levelTxt = "健康";
|
|
|
+ } else if (valueNum >= 35 && valueNum <= 75) {
|
|
|
+ levelTxt = "良";
|
|
|
+ } else if (valueNum > 75 && valueNum <= 115) {
|
|
|
+ levelTxt = "轻度污染";
|
|
|
+ } else if (valueNum > 115 && valueNum <= 150) {
|
|
|
+ levelTxt = "中度污染";
|
|
|
+ } else if (valueNum > 150 && valueNum <= 250) {
|
|
|
+ levelTxt = "重度污染";
|
|
|
+ } else if (valueNum > 250) {
|
|
|
+ levelTxt = "严重污染";
|
|
|
+ }
|
|
|
+ console.log("levelTxt==", levelTxt);
|
|
|
+ } else if (name == "hcho") {
|
|
|
+ if (valueNum <= 0.1) {
|
|
|
+ levelTxt = "健康";
|
|
|
+ } else {
|
|
|
+ levelTxt = "超标";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let obj = {
|
|
|
+ levelTxt: levelTxt,
|
|
|
+ };
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
});
|
|
|
onBeforeUnmount(() => {});
|
|
|
- onMounted(() => {});
|
|
|
+ onMounted(() => {
|
|
|
+ proxyData.getWeatherInfo();
|
|
|
+ proxyData.getSpaceInfo();
|
|
|
+ });
|
|
|
return {
|
|
|
...toRefs(proxyData),
|
|
|
};
|
|
@@ -188,7 +357,7 @@ export default defineComponent({
|
|
|
font-weight: 400;
|
|
|
line-height: 16.6px;
|
|
|
text-align: left;
|
|
|
- &:nth-child(1){
|
|
|
+ &:nth-child(1) {
|
|
|
width: 94px;
|
|
|
margin-right: 7px;
|
|
|
}
|
|
@@ -276,6 +445,9 @@ export default defineComponent({
|
|
|
font-size: 20.4px;
|
|
|
font-weight: 600;
|
|
|
line-height: 26.66px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
}
|