Browse Source

feat: 时间修改

珍珍 2 months ago
parent
commit
927ac75514
2 changed files with 228 additions and 153 deletions
  1. 3 0
      public/images/pac/calendar.svg
  2. 225 153
      src/views/pac/entranceScreen.vue

File diff suppressed because it is too large
+ 3 - 0
public/images/pac/calendar.svg


+ 225 - 153
src/views/pac/entranceScreen.vue

@@ -2,7 +2,7 @@
   <div class="enter-main">
     <div class="top-box">
       <div class="left">
-        <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
+        <!-- <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" /> -->
         <img
           class="weather-icon"
           v-show="outWeather.imgname"
@@ -16,23 +16,44 @@
         <div class="wether-pm">
           <div class="value-box">
             <span>PM 2.5</span>
-            <span>{{ outWeather.pm25 ? outWeather.pm25 : "--" }}</span>
+            <span>{{ outWeather.pm25 ? outWeather.pm25 : '--' }}</span>
           </div>
           <div class="value-des">
             <span>室外空气质量</span>
-            <span>{{ outWeather.quality ? outWeather.quality : "--" }}</span>
+            <span>{{ outWeather.quality ? outWeather.quality : '--' }}</span>
           </div>
         </div>
       </div>
       <div class="right">
-        <div class="env-box" v-for="(item,index) in envlist">
+        <div class="env-box">
+          <div class="title-box">
+            <img :src="parseImgUrl('pac', 'calendar.svg')" />
+            <div class="title calendar-title">
+              <span>{{ dateObj.month }}</span>
+              <span>/</span>
+              <span>{{ dateObj.day }}</span>
+            </div>
+          </div>
+          <div class="index-box calendar-time">
+            <span>{{ dateObj.hours }}</span>
+            <span>:</span>
+            <span>{{ dateObj.minute }}</span>
+          </div>
+        </div>
+        <div
+          class="env-box"
+          :key="index + 'env'"
+          v-for="(item, index) 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.num }}</div>
-            <div class="text" :class="index>1?'temp-text':''">{{ item.levelTxt }}</div>
+            <div class="text" :class="index > 1 ? 'temp-text' : ''">
+              {{ item.levelTxt }}
+            </div>
           </div>
         </div>
       </div>
@@ -49,240 +70,259 @@ import {
   onMounted,
   ref,
   onBeforeUnmount,
-} from "vue";
-import { parseImgUrl, setQueryConfig } from "@/utils";
-import { getWeatherNew, getPacSpaceInfo } from "@/apis/envmonitor";
-import { setInterval, clearInterval } from "timers";
+} from 'vue'
+import { parseImgUrl, setQueryConfig, formatDate, getRelNowTime } from '@/utils'
+import { getWeatherNew, getPacSpaceInfo } from '@/apis/envmonitor'
+import { setInterval, clearInterval } from 'timers'
 export default defineComponent({
   components: {},
   setup(props) {
     const envlist = [
       {
         id: 1,
-        name: "PM 2.5",
-        unit: "ug/m³",
-        funcid: "PM2d5",
-        levelTxt: "",
+        name: 'PM 2.5',
+        unit: 'ug/m³',
+        funcid: 'PM2d5',
+        levelTxt: '',
         value: 10,
-        img: parseImgUrl("pac", "pm2.5.svg"),
+        img: parseImgUrl('pac', 'pm2.5.svg'),
         showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
       },
       {
         id: 2,
         value: 10,
-        name: "甲醛",
-        unit: "mg/㎡",
-        levelTxt: "",
-        img: parseImgUrl("pac", "HCHO.svg"),
+        name: '甲醛',
+        unit: 'mg/㎡',
+        levelTxt: '',
+        img: parseImgUrl('pac', 'HCHO.svg'),
       },
       {
         id: 3,
         value: 10,
-        name: "温度",
-        unit: "%",
-        levelTxt: "",
-        funcid: "Tdb,RH",
-        img: parseImgUrl("pac", "Tdb.svg"),
+        name: '温度',
+        unit: '%',
+        levelTxt: '',
+        funcid: 'Tdb,RH',
+        img: parseImgUrl('pac', 'Tdb.svg'),
       },
       {
         id: 3,
         value: 10,
-        name: "湿度",
-        levelTxt: "",
-        unit: "%",
-        funcid: "Tdb,RH",
-        img: parseImgUrl("pac", "RH.svg"),
+        name: '湿度',
+        levelTxt: '',
+        unit: '%',
+        funcid: 'Tdb,RH',
+        img: parseImgUrl('pac', 'RH.svg'),
       },
-    ];
+    ]
     const proxyData = reactive({
       envlist: envlist,
       parseImgUrl: parseImgUrl,
-      time1: "",
-      time2: "",
+      time1: '',
+      time2: '',
       params: {
-        spaceId: "Sp31010600032517f22f3d6a4c71b18cab24c444d362",
-        pubname: "sagacarepad",
-        projectId: "Pj3101060003",
+        spaceId: 'Sp31010600032517f22f3d6a4c71b18cab24c444d362',
+        pubname: 'sagacarepad',
+        projectId: 'Pj3101060003',
       },
       outWeather: {},
       getWeatherIconByText(text) {
-        let imgname = "晴.svg";
-        if (text.indexOf("晴") > -1) {
-          imgname = "晴.svg";
-        } else if (text.indexOf("雨") > -1) {
-          imgname = "大雨.svg";
-        } else if (text.indexOf("阴") > -1 || text.indexOf("云") > -1) {
-          imgname = "阴.svg";
-        } else if (text.indexOf("霾") > -1) {
-          imgname = "雾.svg";
-        } else if (text.indexOf("雾") > -1) {
-          imgname = "雾.svg";
-        } else if (text.indexOf("风") > -1) {
-          imgname = "风.svg";
-        } else if (text.indexOf("雷") > -1) {
-          imgname = "雷阵雨.svg";
+        let imgname = '晴.svg'
+        if (text.indexOf('晴') > -1) {
+          imgname = '晴.svg'
+        } else if (text.indexOf('雨') > -1) {
+          imgname = '大雨.svg'
+        } else if (text.indexOf('阴') > -1 || text.indexOf('云') > -1) {
+          imgname = '阴.svg'
+        } else if (text.indexOf('霾') > -1) {
+          imgname = '雾.svg'
+        } else if (text.indexOf('雾') > -1) {
+          imgname = '雾.svg'
+        } else if (text.indexOf('风') > -1) {
+          imgname = '风.svg'
+        } else if (text.indexOf('雷') > -1) {
+          imgname = '雷阵雨.svg'
         }
-        return imgname;
+        return imgname
       },
       getWeatherIconByCode(code) {
-        let imgname = "";
+        let imgname = ''
         if (code <= 3) {
-          imgname = "晴.svg";
+          imgname = '晴.svg'
         } else if (code <= 8) {
-          imgname = "多云.svg";
+          imgname = '多云.svg'
         } else if (code <= 9) {
-          imgname = "阴.svg";
+          imgname = '阴.svg'
         } else if (code <= 10) {
-          imgname = "阵雨.svg";
+          imgname = '阵雨.svg'
         } else if (code <= 12) {
-          imgname = "雷阵雨.svg";
+          imgname = '雷阵雨.svg'
         } else if (code <= 13) {
-          imgname = "小雨.svg";
+          imgname = '小雨.svg'
         } else if (code <= 15) {
-          imgname = "大雨.svg";
+          imgname = '大雨.svg'
         } else if (code <= 18) {
-          imgname = "暴雨.svg";
+          imgname = '暴雨.svg'
         } else if (code <= 19) {
           // 冻雨
-          imgname = "小雨.svg";
+          imgname = '小雨.svg'
         } else if (code <= 20) {
-          imgname = "雨夹雪.svg";
-        }  else if (code <= 23) {
-          imgname = "小雪.svg";
-        }
-        else if (code <= 25) {
-          imgname = "大雪.svg";
+          imgname = '雨夹雪.svg'
+        } else if (code <= 23) {
+          imgname = '小雪.svg'
+        } else if (code <= 25) {
+          imgname = '大雪.svg'
         } else if (code <= 29) {
-          imgname = "阴.svg";
+          imgname = '阴.svg'
         } else if (code <= 31) {
-          imgname = "雾.svg";
+          imgname = '雾.svg'
         } else if (code <= 35) {
-          imgname = "风.svg";
+          imgname = '风.svg'
         } else if (code <= 36) {
-          imgname = "龙卷风.svg";
+          imgname = '龙卷风.svg'
         } else if (code <= 37) {
           // 冷
-          imgname = "阴.svg";
+          imgname = '阴.svg'
         } else if (code <= 38) {
           // 热
-          imgname = "晴.svg";
+          imgname = '晴.svg'
         }
-        return imgname;
+        return imgname
       },
       getWeatherInfo() {
-        const str = setQueryConfig(proxyData.params);
+        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);
+          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);
+            imgname = proxyData.getWeatherIconByText(text)
           }
-          console.log("imgname==", imgname);
+          console.log('imgname==', imgname)
 
-          proxyData.outWeather.imgname = imgname;
-        });
+          proxyData.outWeather.imgname = imgname
+        })
       },
       getSpaceInfo() {
-        const str = setQueryConfig(proxyData.params);
+        const str = setQueryConfig(proxyData.params)
         getPacSpaceInfo({ criteria: proxyData.params }).then((res) => {
-          const content = (res && res.content) || [];
+          const content = (res && res.content) || []
           if (content && content.length) {
-            proxyData.formatSpaceInfo(content);
+            proxyData.formatSpaceInfo(content)
           }
-        });
+        })
       },
       formatSpaceInfo(content = []) {
         for (let i = 0; i < content.length; i++) {
-          let item = content[i];
+          let item = content[i]
           if (item.pm25 || item.pm25 === 0) {
-            let obj = proxyData.checkLevel(item.pm25, "pm25");
+            let obj = proxyData.checkLevel(item.pm25, 'pm25')
             // console.log("obj==", obj);
-            proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : "--";
-            proxyData.envlist[0].num = item.pm25;
+            proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : '--'
+            proxyData.envlist[0].num = item.pm25
           } else {
-            proxyData.envlist[0].levelTxt = "";
-            proxyData.envlist[0].num = "--";
+            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;
+            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 = "--";
+            proxyData.envlist[1].levelTxt = ''
+            proxyData.envlist[1].num = '--'
           }
           if (item.temperature || item.temperature == 0) {
-            proxyData.envlist[2].num = item.temperature;
-            proxyData.envlist[2].levelTxt = "℃";
+            proxyData.envlist[2].num = item.temperature
+            proxyData.envlist[2].levelTxt = '℃'
           }
           if (item.humidity || item.humidity == 0) {
-            let obj = proxyData.checkLevel(item.humidity, "humidity");
-            proxyData.envlist[3].levelTxt = "%";
-            proxyData.envlist[3].num = item.humidity;
+            let obj = proxyData.checkLevel(item.humidity, 'humidity')
+            proxyData.envlist[3].levelTxt = '%'
+            proxyData.envlist[3].num = item.humidity
           } else {
-            proxyData.envlist[3].num = "--";
-            proxyData.envlist[3].levelTxt = "%";
+            proxyData.envlist[3].num = '--'
+            proxyData.envlist[3].levelTxt = '%'
             // proxyData.envlist[3].levelTxt = "";
           }
         }
       },
       checkLevel(value, name) {
-      let objList = {
-        humidity: {
-          range: [30, 70],
-          text: ['干燥', '健康', '潮湿'],
-        },
-        co2: {
-          range: [800, 1000, 1500],
-          text: ['健康', '达标', '略高', '超标'],
-        },
-        pm25: {
-          range: [35, 75, 115, 150, 250],
-          text: ['健康', '良', '轻度污染', '中度污染', '重度污染', '严重污染'],
-        },
-        hcho: {
-          range: [0.1],
-          text: ['健康', '超标'],
-        },
-        temper: {
-          range: [20, 24],
-          text: ['偏冷', '舒适', '偏热'],
-        },
-      };
-      let sortArr = [value, ...objList[name].range].sort((a, b) => {
-        return a - b;
-      });
+        let objList = {
+          humidity: {
+            range: [30, 70],
+            text: ['干燥', '健康', '潮湿'],
+          },
+          co2: {
+            range: [800, 1000, 1500],
+            text: ['健康', '达标', '略高', '超标'],
+          },
+          pm25: {
+            range: [35, 75, 115, 150, 250],
+            text: [
+              '健康',
+              '良',
+              '轻度污染',
+              '中度污染',
+              '重度污染',
+              '严重污染',
+            ],
+          },
+          hcho: {
+            range: [0.1],
+            text: ['健康', '超标'],
+          },
+          temper: {
+            range: [20, 24],
+            text: ['偏冷', '舒适', '偏热'],
+          },
+        }
+        let sortArr = [value, ...objList[name].range].sort((a, b) => {
+          return a - b
+        })
 
-      let level = sortArr.findIndex((item) => item === value);
-      let levelTxt = objList[name].text[level];
-      return { level, levelTxt };
-    },
+        let level = sortArr.findIndex((item) => item === value)
+        let levelTxt = objList[name].text[level]
+        return { level, levelTxt }
+      },
       timeInit() {
         this.time1 = setInterval(() => {
-          this.getWeatherInfo();
-        }, 300000);
+          this.getWeatherInfo()
+        }, 300000)
         this.time12 = setInterval(() => {
-          this.getSpaceInfo();
-        }, 300000);
+          this.getSpaceInfo()
+        }, 300000)
+      },
+      dateObj: {},
+      getNowDate() {
+        let date = formatDate('YYYY.MM.DD HH:mm:ss')
+        let dateArr = date.split(' ')
+        proxyData.dateObj.month = dateArr[0].split('.')[1]
+        proxyData.dateObj.day = dateArr[0].split('.')[2]
+        let nowTime = dateArr[1]
+        // console.log(nowTime)
+        proxyData.dateObj.hours = nowTime.split(':')[0]
+        proxyData.dateObj.minute = nowTime.split(':')[1]
       },
-    });
+      dateTime: null,
+    })
     onBeforeUnmount(() => {
-      clearInterval(this.time1);
-      clearInterval(this.time1);
-    });
+      clearInterval(this.time1)
+      clearInterval(this.time1)
+    })
     onMounted(() => {
-      proxyData.getWeatherInfo();
-      proxyData.getSpaceInfo();
-      proxyData.timeInit();
-    });
+      proxyData.getWeatherInfo()
+      proxyData.getSpaceInfo()
+      proxyData.timeInit()
+      proxyData.getNowDate()
+    })
     return {
       ...toRefs(proxyData),
-    };
+    }
   },
-});
+})
 </script>
 <style lang="scss" scoped>
 // 因为像素转换的单位是96, 大屏的设计图是2160px,
@@ -387,7 +427,7 @@ export default defineComponent({
       }
     }
     .right {
-      width: 52.7vw;
+      width: 57.2vw;
       display: flex;
       justify-content: space-between;
     }
@@ -396,8 +436,8 @@ export default defineComponent({
   .env-box {
     box-sizing: border-box;
     padding: 0 40rpx;
-    min-width: 11.7vw;
-    max-width: 13.5vw;
+    min-width: 8.33vw;
+    max-width: 13.15vw;
     // height: 70.8vh;
     color: #fff;
     border: 2px solid rgba(255, 255, 255, 0.2);
@@ -442,6 +482,20 @@ export default defineComponent({
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
       }
+      .calendar-title {
+        margin-left: 4.44px;
+        span {
+          &:nth-child(1) {
+          }
+          &:nth-child(2) {
+            margin-left: 4.5px;
+            margin-right: 4.5px;
+            font-size: 12.45px;
+          }
+          &:nth-child(3) {
+          }
+        }
+      }
     }
 
     .index-box {
@@ -467,8 +521,26 @@ export default defineComponent({
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .temp-text{
-        font-family:Montserrat;
+      .temp-text {
+        font-family: Montserrat;
+      }
+    }
+    .calendar-time {
+      span {
+        display: block;
+        font-family: Montserrat;
+        font-size: 20.44px;
+        font-weight: 600;
+        line-height: 26.66px;
+        // &:nth-child(1) {
+        //   line-height: 26.66px;
+        // }
+        // &:nth-child(3) {
+        //   line-height: 26.66px;
+        // }
+        &:nth-child(2) {
+          padding-left: 11.55px;
+        }
       }
     }
   }