Browse Source

feat: pac大屏

珍珍 3 weeks ago
parent
commit
f53bd542db

BIN
public/images/pac/weather.zip


public/images/pac/weather/sunny.png → public/images/pac/weather/多云.png


File diff suppressed because it is too large
+ 42 - 0
public/images/pac/weather/多云.svg


BIN
public/images/pac/weather/大雨.png


File diff suppressed because it is too large
+ 217 - 0
public/images/pac/weather/大雨.svg


File diff suppressed because it is too large
+ 46 - 0
public/images/pac/weather/大雪.svg


BIN
public/images/pac/weather/小雨.png


File diff suppressed because it is too large
+ 147 - 0
public/images/pac/weather/小雨.svg


File diff suppressed because it is too large
+ 38 - 0
public/images/pac/weather/小雪.svg


BIN
public/images/pac/weather/晴.png


+ 21 - 0
public/images/pac/weather/晴.svg

@@ -0,0 +1,21 @@
+<svg width="120" height="115" viewBox="0 0 120 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_155_701)">
+<ellipse cx="60" cy="57.1429" rx="60" ry="57.1429" fill="url(#paint0_linear_155_701)"/>
+</g>
+<defs>
+<filter id="filter0_i_155_701" x="0" y="0" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5.71429"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_155_701"/>
+</filter>
+<linearGradient id="paint0_linear_155_701" x1="60" y1="0" x2="60" y2="114.286" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD358"/>
+<stop offset="1" stop-color="#FA6C21"/>
+</linearGradient>
+</defs>
+</svg>

BIN
public/images/pac/weather/暴雨.png


File diff suppressed because it is too large
+ 160 - 0
public/images/pac/weather/暴雨.svg


BIN
public/images/pac/weather/阴.png


File diff suppressed because it is too large
+ 42 - 0
public/images/pac/weather/阴.svg


BIN
public/images/pac/weather/阵雨.png


File diff suppressed because it is too large
+ 125 - 0
public/images/pac/weather/阵雨.svg


BIN
public/images/pac/weather/雨夹雪.png


File diff suppressed because it is too large
+ 108 - 0
public/images/pac/weather/雨夹雪.svg


BIN
public/images/pac/weather/雪.png


BIN
public/images/pac/weather/雷阵雨.png


BIN
public/images/pac/weather/雾.png


+ 36 - 0
public/images/pac/weather/雾.svg

@@ -0,0 +1,36 @@
+<svg width="128" height="110" viewBox="0 0 128 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_155_488)">
+<circle cx="63.4603" cy="42.5532" r="42.5532" fill="url(#paint0_linear_155_488)"/>
+</g>
+<path d="M4.85059 70.3956C24.7087 65.5335 44.5669 65.5335 64.4251 70.3956C84.2832 75.2578 104.141 75.2578 124 70.3956" stroke="url(#paint1_linear_155_488)" stroke-width="7.86196" stroke-linecap="round"/>
+<path d="M4 86.483C23.8582 81.6209 43.7163 81.6209 63.5745 86.483C83.4326 91.3452 103.291 91.3452 123.149 86.483" stroke="url(#paint2_linear_155_488)" stroke-width="7.86196" stroke-linecap="round"/>
+<path d="M4 101.802C23.8582 96.9397 43.7163 96.9397 63.5745 101.802C83.4326 106.664 103.291 106.664 123.149 101.802" stroke="url(#paint3_linear_155_488)" stroke-width="7.86196" stroke-linecap="round"/>
+<defs>
+<filter id="filter0_i_155_488" x="20.9071" y="0" width="85.1064" height="91.099" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5.99256"/>
+<feGaussianBlur stdDeviation="10.487"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="overlay" in2="shape" result="effect1_innerShadow_155_488"/>
+</filter>
+<linearGradient id="paint0_linear_155_488" x1="63.4603" y1="0" x2="63.4603" y2="85.1064" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD358"/>
+<stop offset="1" stop-color="#FA6C21"/>
+</linearGradient>
+<linearGradient id="paint1_linear_155_488" x1="-2.66715" y1="66.6664" x2="119.319" y2="74.0423" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#CFCFCF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_155_488" x1="-3.51773" y1="82.7538" x2="118.468" y2="90.1297" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#CFCFCF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_155_488" x1="-3.51773" y1="98.0727" x2="118.468" y2="105.449" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#CFCFCF"/>
+</linearGradient>
+</defs>
+</svg>

BIN
public/images/pac/weather/风.png


File diff suppressed because it is too large
+ 76 - 0
public/images/pac/weather/风.svg


BIN
public/images/pac/weather/龙卷风.png


File diff suppressed because it is too large
+ 110 - 0
public/images/pac/weather/龙卷风.svg


+ 15 - 2
src/apis/envmonitor.ts

@@ -13,8 +13,13 @@ export const getCompanyInfo = (companyInfo: RequestParams) => {
   return https().request<RootObject<CompanyModel>>(`/api/company/config/${companyInfo.companyId}`, Method.GET, undefined, ContentType.json)
 }
 export const getWeather = (params: string) => {
-  return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrent?${params}`, Method.GET, undefined, ContentType.json)
+  return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrentWeather?${params}`, Method.GET, undefined, ContentType.json)
 }
+
+// export const getWeather = () => {
+//   // return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrent`, Method.GET, undefined, ContentType.json)
+//   return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrentWeather`, Method.GET, undefined, ContentType.json)
+// }
 export const getSpaceInfo = (data: any) => {
   return https().request<RootWeatherObject<SpaceModel>>(`${duoduoenvService}space/property`, Method.POST, data, ContentType.json)
 }
@@ -315,4 +320,12 @@ export const deleteWorkSpaceBatch = (data: any) => {
 //获取插座列表
 export const queryEquipmentStatusInfo = (params: any) => {
   return https().request<any>(`${duoduoenvService}ctrl/queryEquipmentStatusInfo?${params}`, Method.GET, undefined, ContentType.json)
-}
+}
+
+export const getWeatherNew = (params: string) => {
+  return https({ isComParams: false }).request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrentWeather?${params}`, Method.GET, undefined, ContentType.json)
+}
+
+export const getPacSpaceInfo = (data: any) => {
+  return https({ isComParams: false }).request<RootWeatherObject<SpaceModel>>(`${duoduoenvService}space/property`, Method.POST, data, ContentType.json)
+}

+ 3 - 2
src/utils/https.ts

@@ -7,7 +7,7 @@ import Cookies from 'js-cookie'
 import { request } from 'http'
 import { getComparams, getUserInfo, setQueryConfig } from '.'
 
-export const https = (configobj: any = { timeout: '' }) => {
+export const https = (configobj: any = { timeout: '',isComParams:true }) => {
   // debugger
   let config: HttpClientConfig = {
     baseURL: networkConfig.host,
@@ -25,7 +25,8 @@ export const https = (configobj: any = { timeout: '' }) => {
     // debugger
     let comInfo = getUserInfo()
     // comInfo.projectId="Pj1101080255"
-    const comParams: string = setQueryConfig(comInfo)
+    console.log("configobj.isComParams==",configobj.isComParams)
+    const comParams: string = configobj.isComParams?setQueryConfig(comInfo):''
     let url: any = request.url
     if (url.indexOf("?") != -1) {
       request.url = request.url + "&" + comParams

+ 192 - 20
src/views/pac/entranceScreen.vue

@@ -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;
       }
     }
   }