entranceScreen.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. <template>
  2. <div class="enter-main">
  3. <div class="top-box">
  4. <div class="left">
  5. <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
  6. <img
  7. class="weather-icon"
  8. v-show="outWeather.imgname"
  9. :src="parseImgUrl('pac', 'weather/' + outWeather.imgname)"
  10. />
  11. <div class="wether-info">
  12. <div class="temp">{{ outWeather.temperature }} ℃</div>
  13. <div class="text">{{ outWeather.text }}</div>
  14. </div>
  15. <div class="line"></div>
  16. <div class="wether-pm">
  17. <div class="value-box">
  18. <span>PM 2.5</span>
  19. <span>{{ outWeather.pm25 ? outWeather.pm25 : "--" }}</span>
  20. </div>
  21. <div class="value-des">
  22. <span>室外空气质量</span>
  23. <span>{{ outWeather.quality ? outWeather.quality : "--" }}</span>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="right">
  28. <div class="env-box" v-for="item in envlist">
  29. <div class="title-box">
  30. <img class="icon" :src="item.img" />
  31. <div class="title">{{ item.name }}</div>
  32. </div>
  33. <div class="index-box">
  34. <div class="num">{{ item.num }}</div>
  35. <div class="text">{{ item.levelTxt }}</div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import {
  44. defineComponent,
  45. reactive,
  46. toRefs,
  47. onBeforeMount,
  48. onMounted,
  49. ref,
  50. onBeforeUnmount,
  51. } from "vue";
  52. import { parseImgUrl, setQueryConfig } from "@/utils";
  53. import { getWeatherNew, getPacSpaceInfo } from "@/apis/envmonitor";
  54. import { setInterval, clearInterval } from "timers";
  55. export default defineComponent({
  56. components: {},
  57. setup(props) {
  58. const envlist = [
  59. {
  60. id: 1,
  61. name: "PM 2.5",
  62. unit: "ug/m³",
  63. funcid: "PM2d5",
  64. levelTxt: "",
  65. value: 10,
  66. img: parseImgUrl("pac", "pm2.5.svg"),
  67. showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
  68. },
  69. {
  70. id: 2,
  71. value: 10,
  72. name: "甲醛",
  73. unit: "mg/㎡",
  74. levelTxt: "",
  75. img: parseImgUrl("pac", "HCHO.svg"),
  76. },
  77. {
  78. id: 3,
  79. value: 10,
  80. name: "温度",
  81. unit: "%",
  82. levelTxt: "",
  83. funcid: "Tdb,RH",
  84. img: parseImgUrl("pac", "Tdb.svg"),
  85. },
  86. {
  87. id: 3,
  88. value: 10,
  89. name: "湿度",
  90. levelTxt: "",
  91. unit: "%",
  92. funcid: "Tdb,RH",
  93. img: parseImgUrl("pac", "RH.svg"),
  94. },
  95. ];
  96. const proxyData = reactive({
  97. envlist: envlist,
  98. parseImgUrl: parseImgUrl,
  99. time1: "",
  100. time2: "",
  101. params: {
  102. spaceId: "Sp31010600032517f22f3d6a4c71b18cab24c444d362",
  103. pubname: "sagacarepad",
  104. projectId: "Pj3101060003",
  105. },
  106. outWeather: {},
  107. getWeatherIconByText(text) {
  108. let imgname = "晴.svg";
  109. if (text.indexOf("晴") > -1) {
  110. imgname = "晴.svg";
  111. } else if (text.indexOf("雨") > -1) {
  112. imgname = "大雨.svg";
  113. } else if (text.indexOf("阴") > -1 || text.indexOf("云") > -1) {
  114. imgname = "阴.svg";
  115. } else if (text.indexOf("霾") > -1) {
  116. imgname = "雾.svg";
  117. } else if (text.indexOf("雾") > -1) {
  118. imgname = "雾.svg";
  119. } else if (text.indexOf("风") > -1) {
  120. imgname = "风.svg";
  121. } else if (text.indexOf("雷") > -1) {
  122. imgname = "雷阵雨.svg";
  123. }
  124. return imgname;
  125. },
  126. getWeatherIconByCode(code) {
  127. let imgname = "";
  128. if (code <= 3) {
  129. imgname = "晴.svg";
  130. } else if (code <= 8) {
  131. imgname = "多云.svg";
  132. } else if (code <= 9) {
  133. imgname = "阴.svg";
  134. } else if (code <= 10) {
  135. imgname = "阵雨.svg";
  136. } else if (code <= 12) {
  137. imgname = "雷阵雨.svg";
  138. } else if (code <= 13) {
  139. imgname = "小雨.svg";
  140. } else if (code <= 15) {
  141. imgname = "大雨.svg";
  142. } else if (code <= 18) {
  143. imgname = "暴雨.svg";
  144. } else if (code <= 19) {
  145. // 冻雨
  146. imgname = "小雨.svg";
  147. } else if (code <= 20) {
  148. imgname = "雨夹雪.svg";
  149. } else if (code <= 23) {
  150. imgname = "小雪.svg";
  151. }
  152. else if (code <= 25) {
  153. imgname = "大雪.svg";
  154. } else if (code <= 29) {
  155. imgname = "阴.svg";
  156. } else if (code <= 31) {
  157. imgname = "雾.svg";
  158. } else if (code <= 35) {
  159. imgname = "风.svg";
  160. } else if (code <= 36) {
  161. imgname = "龙卷风.svg";
  162. } else if (code <= 37) {
  163. // 冷
  164. imgname = "阴.svg";
  165. } else if (code <= 38) {
  166. // 热
  167. imgname = "晴.svg";
  168. }
  169. return imgname;
  170. },
  171. getWeatherInfo() {
  172. const str = setQueryConfig(proxyData.params);
  173. getWeatherNew(str).then((res) => {
  174. console.log(res);
  175. proxyData.outWeather = res.content ? res.content : {};
  176. let text = proxyData.outWeather.text || "";
  177. let code = proxyData.outWeather.code;
  178. let imgname = proxyData.getWeatherIconByCode(code);
  179. if (!imgname) {
  180. imgname = proxyData.getWeatherIconByText(text);
  181. }
  182. console.log("imgname==", imgname);
  183. proxyData.outWeather.imgname = imgname;
  184. });
  185. },
  186. getSpaceInfo() {
  187. const str = setQueryConfig(proxyData.params);
  188. getPacSpaceInfo({ criteria: proxyData.params }).then((res) => {
  189. const content = (res && res.content) || [];
  190. if (content && content.length) {
  191. proxyData.formatSpaceInfo(content);
  192. }
  193. });
  194. },
  195. formatSpaceInfo(content = []) {
  196. for (let i = 0; i < content.length; i++) {
  197. let item = content[i];
  198. if (item.pm25 || item.pm25 === 0) {
  199. let obj = proxyData.checkLevel(item.pm25, "pm25");
  200. // console.log("obj==", obj);
  201. proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : "--";
  202. proxyData.envlist[0].num = item.pm25;
  203. } else {
  204. proxyData.envlist[0].levelTxt = "";
  205. proxyData.envlist[0].num = "--";
  206. }
  207. if (item.hcho || item.hcho == 0) {
  208. let obj = proxyData.checkLevel(item.hcho, "hcho");
  209. // proxyData.envlist[1].levelTxt = obj.levelTxt;
  210. proxyData.envlist[1].num = item.hcho;
  211. } else {
  212. // proxyData.envlist[1].levelTxt = "";
  213. proxyData.envlist[1].num = "--";
  214. }
  215. if (item.temperature || item.temperature == 0) {
  216. proxyData.envlist[2].num = item.temperature;
  217. }
  218. if (item.humidity || item.humidity == 0) {
  219. let obj = proxyData.checkLevel(item.humidity, "humidity");
  220. // proxyData.envlist[3].levelTxt = obj.levelTxt;
  221. proxyData.envlist[3].num = item.humidity;
  222. } else {
  223. proxyData.envlist[3].num = "--";
  224. // proxyData.envlist[3].levelTxt = "";
  225. }
  226. }
  227. },
  228. checkLevel(value, name) {
  229. let objList = {
  230. humidity: {
  231. range: [30, 70],
  232. text: ['干燥', '健康', '潮湿'],
  233. },
  234. co2: {
  235. range: [800, 1000, 1500],
  236. text: ['健康', '达标', '略高', '超标'],
  237. },
  238. pm25: {
  239. range: [35, 75, 115, 150, 250],
  240. text: ['健康', '良', '轻度污染', '中度污染', '重度污染', '严重污染'],
  241. },
  242. hcho: {
  243. range: [0.1],
  244. text: ['健康', '超标'],
  245. },
  246. temper: {
  247. range: [20, 24],
  248. text: ['偏冷', '舒适', '偏热'],
  249. },
  250. };
  251. let sortArr = [value, ...objList[name].range].sort((a, b) => {
  252. return a - b;
  253. });
  254. let level = sortArr.findIndex((item) => item === value);
  255. let levelTxt = objList[name].text[level];
  256. return { level, levelTxt };
  257. },
  258. timeInit() {
  259. this.time1 = setInterval(() => {
  260. this.getWeatherInfo();
  261. }, 300000);
  262. this.time12 = setInterval(() => {
  263. this.getSpaceInfo();
  264. }, 300000);
  265. },
  266. });
  267. onBeforeUnmount(() => {
  268. clearInterval(this.time1);
  269. clearInterval(this.time1);
  270. });
  271. onMounted(() => {
  272. proxyData.getWeatherInfo();
  273. proxyData.getSpaceInfo();
  274. proxyData.timeInit();
  275. });
  276. return {
  277. ...toRefs(proxyData),
  278. };
  279. },
  280. });
  281. </script>
  282. <style lang="scss" scoped>
  283. // 因为像素转换的单位是96, 大屏的设计图是2160px,
  284. // 所以px大小除/2.25就可自定计算出rem了
  285. .enter-main {
  286. position: relative;
  287. width: 100%;
  288. height: 100%;
  289. background: rgba(160, 146, 137, 1);
  290. .top-box {
  291. box-sizing: border-box;
  292. // padding: 14.58vh 28vw;
  293. padding: 0 2.78vw;
  294. width: 100%;
  295. height: 100%;
  296. display: flex;
  297. justify-content: space-between;
  298. align-items: center;
  299. .left {
  300. display: flex;
  301. align-items: center;
  302. .logo {
  303. width: 34.23px;
  304. // height: 46px;
  305. margin-right: 26.6px;
  306. }
  307. .weather-icon {
  308. width: 53.4px;
  309. // height: 58.6px;
  310. margin-right: 23px;
  311. }
  312. .wether-info {
  313. color: #fff;
  314. .temp {
  315. font-family: Montserrat;
  316. font-size: 25.8px;
  317. font-weight: 600;
  318. line-height: 22px;
  319. text-align: left;
  320. margin-bottom: 9.8px;
  321. }
  322. .text {
  323. font-family: PingFang SC;
  324. font-size: 16.88px;
  325. font-weight: 600;
  326. line-height: 16.4px;
  327. text-align: left;
  328. }
  329. }
  330. .line {
  331. height: 46px;
  332. width: 1px;
  333. background: rgba(216, 185, 164, 1);
  334. margin-left: 17.77px;
  335. margin-right: 17.77px;
  336. }
  337. .wether-pm {
  338. color: #fff;
  339. .value-box {
  340. display: flex;
  341. align-items: center;
  342. font-size: 25.77px;
  343. line-height: 22.22px;
  344. text-align: left;
  345. margin-bottom: 8.88px;
  346. span {
  347. display: inline-block;
  348. &:nth-child(1) {
  349. width: 94px;
  350. margin-right: 7px;
  351. font-family: Montserrat;
  352. font-weight: 400;
  353. }
  354. &:nth-child(2) {
  355. font-family: Montserrat;
  356. font-weight: 600;
  357. }
  358. }
  359. }
  360. .value-des {
  361. display: flex;
  362. align-items: center;
  363. span {
  364. display: inline-block;
  365. font-family: PingFang SC;
  366. font-size: 13.33px;
  367. font-weight: 400;
  368. line-height: 16.6px;
  369. text-align: left;
  370. &:nth-child(1) {
  371. width: 94px;
  372. margin-right: 7px;
  373. }
  374. &:nth-child(2) {
  375. font-family: PingFang SC;
  376. font-size: 16.88px;
  377. font-weight: 600;
  378. text-align: left;
  379. }
  380. }
  381. }
  382. }
  383. }
  384. .right {
  385. width: 52.7vw;
  386. display: flex;
  387. justify-content: space-between;
  388. }
  389. }
  390. .env-box {
  391. width: 11.7vw;
  392. // height: 70.8vh;
  393. color: #fff;
  394. border: 2px solid rgba(255, 255, 255, 0.2);
  395. border-radius: 8.88px;
  396. background: radial-gradient(
  397. 103.15% 78.07% at -3.15% 51.76%,
  398. #a09289 0%,
  399. #9c8c82 100%
  400. );
  401. .title-box {
  402. display: flex;
  403. justify-content: center;
  404. align-items: center;
  405. padding: 8px;
  406. border-radius: 8.4px 8.4px 0 0;
  407. text-align: center;
  408. background: radial-gradient(
  409. 100% 100% at 0% 0%,
  410. rgba(255, 255, 255, 0.4) 0%,
  411. #a09289 100%
  412. );
  413. backdrop-filter: blur(18px);
  414. -webkit-backdrop-filter: blur(18px);
  415. box-shadow: -3px -3px 111px 0px rgba(255, 255, 255, 0.02) inset;
  416. border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  417. border-image-source: linear-gradient(
  418. 169.15deg,
  419. rgba(255, 255, 255, 0.4) 0%,
  420. rgba(238, 237, 237, 0.2) 96.79%
  421. );
  422. .icon {
  423. width: 13.3px;
  424. height: 13.3px;
  425. margin-right: 4px;
  426. }
  427. .title {
  428. font-family: Montserrat;
  429. font-size: 16px;
  430. font-weight: 500;
  431. line-height: 17.78px;
  432. text-align: left;
  433. text-underline-position: from-font;
  434. text-decoration-skip-ink: none;
  435. }
  436. }
  437. .index-box {
  438. padding: 7.55px;
  439. display: flex;
  440. justify-content: center;
  441. align-items: center;
  442. .num {
  443. font-family: Montserrat;
  444. color: #fff;
  445. font-size: 20.4px;
  446. font-weight: 600;
  447. line-height: 26.66px;
  448. margin-right: 4px;
  449. }
  450. .text {
  451. font-family: PingFang SC;
  452. color: #fff;
  453. font-size: 20.4px;
  454. font-weight: 600;
  455. line-height: 26.66px;
  456. white-space: nowrap;
  457. overflow: hidden;
  458. text-overflow: ellipsis;
  459. }
  460. }
  461. }
  462. }
  463. </style>