From 70324b068cb6c3de8aa34dc4fe40beca6ce5753c Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Mon, 13 Dec 2021 15:05:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A9=E6=B0=94=E5=A2=9E=E5=8A=A0=E5=8D=8E?=
 =?UTF-8?q?=E6=B0=8F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile_first/ch-weather-forecast.php      | 179 +++++++++---------
 1 file changed, 93 insertions(+), 86 deletions(-)

diff --git a/application/views/mobile_first/ch-weather-forecast.php b/application/views/mobile_first/ch-weather-forecast.php
index 93493a5a..745a92eb 100644
--- a/application/views/mobile_first/ch-weather-forecast.php
+++ b/application/views/mobile_first/ch-weather-forecast.php
@@ -1,89 +1,89 @@
 <div class="table-responsive" style="margin-bottom: 30px;">
-<table class="weather_info">
-    <tbody>
-    <tr>
-        <td>
-        <div class="day_weather today_weather">
-        
-            <p id="todayDate">...</p>Today      
-            <p id="todayTemperature">...</p>
-            <p id="todayTemperature0">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="todayCondition">...</p>
-            <p id="todayHumidity">Humidity: ...</p>
-            <p id="todayWind">Wind: ...</p>
-        </div>
-        </td>
-        <td>
-        <div class="day_weather">
-            <p id="forecastDate1">...</p>
+    <table class="weather_info">
+        <tbody>
+        <tr>
+            <td>
+            <div class="day_weather today_weather">
             
-            <p id="forecastTemperature1">...</p>
-            <p id="todayTemperature1">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="forecastCondition1">...</p>
-            <p id="forecastHumidity1">Humidity: ...</p>
-            <p id="forecastWind1">Wind: ...</p>
-        </div>
-        </td>
-        <td>
-        <div class="day_weather">
-            <p id="forecastDate2">...</p>
-            
-            <p id="forecastTemperature2">...</p>
-            <p id="todayTemperature2">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="forecastCondition2">...</p>
-            <p id="forecastHumidity2">Humidity: ...</p>
-            <p id="forecastWind2">Wind: ...</p>
-        </div>
-        </td>
-        <td>
-        <div class="day_weather"> 
-            <p id="forecastDate3">...</p>
-           
-            <p id="forecastTemperature3">...</p>
-            <p id="todayTemperature3">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="forecastCondition3">...</p>
-            <p id="forecastHumidity3">Humidity: ...</p>
-            <p id="forecastWind3">Wind: ...</p>
-        </div>
-        </td>
-        <td>
-        <div class="day_weather">
-            <p id="forecastDate4">...</p>
-            
-            <p id="forecastTemperature4">...</p>
-            <p id="todayTemperature4">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="forecastCondition4">...</p>
-            <p id="forecastHumidity4">Humidity: ...</p>
-            <p id="forecastWind4">Wind: ...</p>
-        </div>
-        </td>
-        <td>
-        <div class="day_weather last_day_weather">
-            <p id="forecastDate5">...</p>
-            
-            <p id="forecastTemperature5">...</p>
-            <p id="todayTemperature5">...</p>
-            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5"
-                src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
-            <p id="forecastCondition5">...</p>
-            <p id="forecastHumidity5">Humidity: ...</p>
-            <p id="forecastWind5">Wind: ...</p>
-        </div>
-        </td>
-    </tr>
-    </tbody>
-</table>
-</div>
+                <p id="todayDate">...</p>Today      
+                <p id="todayTemperature">...</p>
+                <p id="todayFahrenheit">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="todayCondition">...</p>
+                <p id="todayHumidity">Humidity: ...</p>
+                <p id="todayWind">Wind: ...</p>
+            </div>
+            </td>
+            <td>
+            <div class="day_weather">
+                <p id="forecastDate1">...</p>
+                
+                <p id="forecastTemperature1">...</p>
+                <p id="forecastFahrenheit1">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="forecastCondition1">...</p>
+                <p id="forecastHumidity1">Humidity: ...</p>
+                <p id="forecastWind1">Wind: ...</p>
+            </div>
+            </td>
+            <td>
+            <div class="day_weather">
+                <p id="forecastDate2">...</p>
+                
+                <p id="forecastTemperature2">...</p>
+                <p id="forecastFahrenheit2">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="forecastCondition2">...</p>
+                <p id="forecastHumidity2">Humidity: ...</p>
+                <p id="forecastWind2">Wind: ...</p>
+            </div>
+            </td>
+            <td>
+            <div class="day_weather"> 
+                <p id="forecastDate3">...</p>
+               
+                <p id="forecastTemperature3">...</p>
+                <p id="forecastFahrenheit3">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="forecastCondition3">...</p>
+                <p id="forecastHumidity3">Humidity: ...</p>
+                <p id="forecastWind3">Wind: ...</p>
+            </div>
+            </td>
+            <td>
+            <div class="day_weather">
+                <p id="forecastDate4">...</p>
+                
+                <p id="forecastTemperature4">...</p>
+                <p id="forecastFahrenheit4">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="forecastCondition4">...</p>
+                <p id="forecastHumidity4">Humidity: ...</p>
+                <p id="forecastWind4">Wind: ...</p>
+            </div>
+            </td>
+            <td>
+            <div class="day_weather last_day_weather">
+                <p id="forecastDate5">...</p>
+                
+                <p id="forecastTemperature5">...</p>
+                <p id="forecastFahrenheit5">...</p>
+                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5"
+                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
+                <p id="forecastCondition5">...</p>
+                <p id="forecastHumidity5">Humidity: ...</p>
+                <p id="forecastWind5">Wind: ...</p>
+            </div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    </div>
 <script>
 // https://openweathermap.org/forecast5
 var cityId = window.ch_forecast_city.id;
@@ -95,6 +95,10 @@ function formatDate(date) {
 function formatWeek(date) {
     return weekMap[date.getDay()];
 }
+// 摄氏温度（C）转换到华氏温度（F）
+function convertToF(centigrade) {
+    return 9*centigrade /5+32;
+}
 var weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
 fetch(weatherUrl)
     .then((res) => {
@@ -109,6 +113,7 @@ fetch(weatherUrl)
         let todayDate = new Date(json.dt * 1000);
         document.getElementById('todayDate').innerText = formatDate(todayDate);
         document.getElementById('todayTemperature').innerText = Math.round(json.main.temp) + '°C';
+        document.getElementById('todayFahrenheit').innerText = convertToF(Math.round(json.main.temp)) + '℉';
         document.getElementById('todayIcon').src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + json.weather[0].icon + '.png';
         document.getElementById('todayCondition').innerText = json.weather[0].main;
         document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%';
@@ -156,10 +161,12 @@ fetch(forecastUrl)
             let lastDay = oneDayList[oneDayList.length - 1];
             let currentDate = new Date(firstDay.dt * 1000);
 
-            document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate);
+            // document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate);
             document.getElementById('forecastDate' + number).innerText = formatDate(currentDate);
             document.getElementById('forecastTemperature' + number).innerText =
-            Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C';
+                Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C';
+            document.getElementById('forecastFahrenheit' + number).innerText =
+                convertToF(Math.round(firstDay.main.temp)) + '~' + convertToF(Math.round(lastDay.main.temp)) + '℉'; 
             document.getElementById('forecastIcon' + number).src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + firstDay.weather[0].icon + '.png';
             document.getElementById('forecastCondition' + number).innerText = firstDay.weather[0].main;
             document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';