weather.js

var weekUrl = egisConfig.dutyServer + '/api/nt_weather/getWeekWeatherList'
var todayUrl = egisConfig.dutyServer + '/api/nt_weather/realtimeweather'
var weekData, todayData, now
var bgUrl = './img/bg/'
var iconUrl = './img/icon/'
var isMorning = new Date().getHours() < 12
var sun = computeSunRiseSunSet(32.34542812459911, 121.2051394443968, 8)
axios.get(weekUrl, { params: { startdate: dateFormat(0), enddate: dateFormat(2) } }).then(res => {
  if (res.data.error_code == 0) {
    weekData = res.data.data.data
    axios.get(todayUrl, { params: { } }).then(res => {
      todayData = res.data.data

      console.log(weekData)
      console.log(todayData)
      
      geneWeahter()
      
    })
  }
})
function geneWeahter(){
  setTimeout(function () {
    if (document.getElementById('weather') != null) {
      weatherGeneration()
      if (document.getElementById('smallWeather') != null) {
        $('#weather').css('display', 'none')
        smallWeatherGeneration()
      } else {
        $('#weather').css('display', 'block')
      }
    } else {
      console.log('无weather')
      geneWeahter()
    }
  }, 1)
}

function smallWeatherGeneration() {
  $('#smallWeather').html('')

  $('#smallWeather').hover(
    function () {
      $('#smallWeather').css('display', 'none')
      $('#weather').css('display', 'block')
    },
    function () {}
  )
  $('#weather').hover(
    function () {},
    function () {
      $('#weather').css('display', 'none')
      $('#smallWeather').css('display', 'block')
    }
  )

  $('#smallWeather').append(`
        <div class="smallWeather-icon">
            <img src=${iconUrl + now.weatherno + '.png'}>
        </div>
        <p>南通</p>
        <p>${todayData.temperature}°</p>
    `)
}

function weatherGeneration() {
  $('#weather').html('')
  now = isMorning ? weekData[0] : weekData[1]

  $('#weather').append(`
        <p class="title">
            <span>南通</span>
            <span>${todayData.time
              .substring(6, todayData.time.length - 1)
              .replace('时', ':')}发布</span>
        </p>
    `)

  $('#weather').append(`<h1>${todayData.temperature}°</h1>`)

  var t_Interval = []
  t_Interval.push(weekData[0].temp)
  t_Interval.push(weekData[1].temp)
  t_Interval.sort()
  $('#weather').append(`
        <div class="sun">
            <span class="sunRise">${sun.strSunRise.substring(2, sun.strSunRise.length)}</span>
            <span class="t_Interval">${now.weather} ${t_Interval[0]}℃~${t_Interval[1]}℃</span>
            <span class="sunSet">${sun.strSunSet.substring(2, sun.strSunSet.length)}</span>
        </div>
    `)

  $('#weather').append(`
        <div class="todayInfo">
            <div class='third'>
                <p style="padding-bottom:5px">${getjqdeath(dateFormat(0))}</p>
                <p>风向：${now.winddirect}</P>
                <p>风力：${now.windvelocity}</P>
            </div>
            <div class='greyBorder'></div>
            <div class='third'>
                <p>温度</p>
                <p class="temperature" style="padding-top:10px">${
                  todayData.temperature
                }<span class="fontSize14">℃</span></p>
            </div>
            <div class='greyBorder'></div>
            <div class='third'>
                <p>今日天气</p>
                <img class='weather-icon' src=${iconUrl + weekData[0].weatherno + '.png'}>
                /
                <img class='weather-icon' src=${iconUrl + weekData[1].weatherno + '.png'}>
            </div>
        </div>
    `)

  $('.third').css({
    width: ($('#weather').width() - 33) / 3,
    'padding-left': '10px',
  })

  $('.weather-icon').css({
    width: $('.third').width() / 4,
    'padding-top': '5px',
  })

  var tt_Interval = []
  tt_Interval.push(weekData[2].temp)
  tt_Interval.push(weekData[3].temp)
  tt_Interval.sort()
  $('#weather').append(`
        <div class="TTT">
            <div class='half'>
                <p>今日气温</p>
                <p class="temperature">${t_Interval[0]}/${t_Interval[1]}<span class="fontSize14">℃</span></p>
            </div>
            <div class='greyBorder'></div>
            <div class='half'>
                <p>明日气温</p>
                <p class="temperature">${tt_Interval[0]}/${tt_Interval[1]}<span class="fontSize14">℃</span></p>
            </div>
        </div>
    `)
  $('.half').css({
    width: ($('#weather').width() - 22) / 2,
    'padding-left': '10px',
  })

  var att_Interval = []
  att_Interval.push(weekData[4].temp)
  att_Interval.push(weekData[5].temp)
  att_Interval.sort()
  $('#weather').append(`
        <div class='prev arrow'><</div>
        <div class='next arrow'>></div>
        <div class="TTAT">
            <div class="tempBlock">
                <img class='weather-icon2' src=${
                  iconUrl + weekData[0 + Number(!isMorning)].weatherno + '.png'
                }>
                <p class="fontSize14">${dateTransform(weekData[0].date)}今天</p>
                <p class="fontSize14">${t_Interval[0]}/${t_Interval[1]}℃</p>
            </div>
            <div class="tempBlock">
                <img class='weather-icon2' src=${iconUrl + weekData[2].weatherno + '.png'}>
                <p class="fontSize14">${dateTransform(weekData[2].date)}明天</p>
                <p class="fontSize14">${tt_Interval[0]}/${tt_Interval[1]}℃</p>
            </div>
            <div class="tempBlock">
                <img class='weather-icon2' src=${iconUrl + weekData[4].weatherno + '.png'}>
                <p class="fontSize14">${dateTransform(weekData[4].date)}后天</p>
                <p class="fontSize14">${att_Interval[0]}/${att_Interval[1]}℃</p>
            </div>
        </div>
    `)
  $('.weather-icon2').css({
    width: $('.weather-icon').width(),
    position: 'absolute',
    top: '40%',
  })
  $('.arrow').hover(
    function () {
      $(this).css('background-color', 'rgba(127,136,140,0.5)')
    },
    function () {
      $(this).css('background-color', '')
    }
  )
  $('.tempBlock').hover(
    function () {
      $(this).css('box-shadow', '0 0 5px 5px rgba(0,0,0,0.4)')
    },
    function () {
      $(this).css('box-shadow', '')
    }
  )
  $('.next').click(function () {
    let distance = -($('.TTAT').width() - $('#weather').width())
    let leftPX = $('.TTAT')
      .css('left')
      .slice(0, $('.TTAT').css('left').length - 2)
    if (Number(leftPX) > Number(distance)) {
      $('.TTAT').css('left', Number(leftPX) - 70 + 'px')
    }
  })
  $('.prev').click(function () {
    let leftPX = $('.TTAT')
      .css('left')
      .slice(0, $('.TTAT').css('left').length - 2)
    if (Number(leftPX) < 0) {
      $('.TTAT').css('left', Number(leftPX) + 70 + 'px')
    }
  })

  $('#weather').css({
    background: `url(${bgUrl}${now.weatherno}.png)`,
    'background-size': `${$('#weather').width()}px ${$('#weather').height()}px`,
  })
}

function getjq(date) {
  var dates = date.split('-')
  var yyyy = Number(dates[0])
  var mm = Number(dates[1])
  var dd = Number(dates[2])
  mm = mm - 1
  var sTermInfo = new Array(
    0,
    21208,
    42467,
    63836,
    85337,
    107014,
    128867,
    150921,
    173149,
    195551,
    218072,
    240693,
    263343,
    285989,
    308563,
    331033,
    353350,
    375494,
    397447,
    419210,
    440795,
    462224,
    483532,
    504758
  )
  var solarTerm = new Array(
    '小寒',
    '大寒',
    '立春',
    '雨水',
    '惊蛰',
    '春分',
    '清明',
    '谷雨',
    '立夏',
    '小满',
    '芒种',
    '夏至',
    '小暑',
    '大暑',
    '立秋',
    '处暑',
    '白露',
    '秋分',
    '寒露',
    '霜降',
    '立冬',
    '小雪',
    '大雪',
    '冬至'
  )
  var solarTerms = ''
  //　　此方法是获取该日期是否为某节气
  //    var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
  //    var tmp2 = tmp1.getUTCDate();
  //    if (tmp2==dd)
  //        solarTerms = solarTerm[mm*2+1];
  //    console.log(solarTerms);
  //    tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
  //    tmp2= tmp1.getUTCDate();
  //    if (tmp2==dd)
  //        solarTerms = solarTerm[mm*2];

  //　　此方法可以获取该日期处于某节气
  while (solarTerms == '') {
    var tmp1 = new Date(
      31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000 + Date.UTC(1900, 0, 6, 2, 5)
    )
    var tmp2 = tmp1.getUTCDate()
    if (tmp2 == dd) solarTerms = solarTerm[mm * 2 + 1]
    tmp1 = new Date(
      31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000 + Date.UTC(1900, 0, 6, 2, 5)
    )
    tmp2 = tmp1.getUTCDate()
    if (tmp2 == dd) solarTerms = solarTerm[mm * 2]
    if (dd > 1) {
      dd = dd - 1
    } else {
      mm = mm - 1
      if (mm < 0) {
        yyyy = yyyy - 1
        mm = 11
      }
      dd = 31
    }
  }
  return solarTerms
}

function getjqdeath(date){
  var solarTerm = new Array(
    '小寒',
    '大寒',
    '立春',
    '雨水',
    '惊蛰',
    '春分',
    '清明',
    '谷雨',
    '立夏',
    '小满',
    '芒种',
    '夏至',
    '小暑',
    '大暑',
    '立秋',
    '处暑',
    '白露',
    '秋分',
    '寒露',
    '霜降',
    '立冬',
    '小雪',
    '大雪',
    '冬至'
  )
  switch(date){
    case '2020-01-06':
      return solarTerm[0];
    case '2020-01-20':
      return solarTerm[1];
    case '2020-02-04':
      return solarTerm[2];
    case '2020-02-19':
      return solarTerm[3];
    case '2020-03-05':
      return solarTerm[4];
    case '2020-03-20':
      return solarTerm[5];
    case '2020-04-04':
      return solarTerm[6];
    case '2020-04-19':
      return solarTerm[7];
    case '2020-05-05':
      return solarTerm[8];
    case '2020-05-20':
      return solarTerm[9];
    case '2020-06-05':
      return solarTerm[10];
    case '2020-06-21':
      return solarTerm[11];
    case '2020-07-06':
      return solarTerm[12];
    case '2020-07-22':
      return solarTerm[13];
    case '2020-08-07':
      return solarTerm[14];
    case '2020-08-22':
      return solarTerm[15];
    case '2020-09-07':
      return solarTerm[16];
    case '2020-09-22':
      return solarTerm[17];
    case '2020-10-08':
      return solarTerm[18];
    case '2020-10-23':
      return solarTerm[19];
    case '2020-11-07':
      return solarTerm[20];
    case '2020-11-22':
      return solarTerm[21];
    case '2020-12-07':
      return solarTerm[22];
    case '2020-12-21':
      return solarTerm[23];
    default:
      return ''
  }
}

function dateFormat(days) {
  var date = new Date()
  date.setDate(date.getDate() + days)
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = date.getDate()<10?'0'+date.getDate():date.getDate()
  return Y + M + D
}

function dateTransform(str) {
  str = str.substring(5, 10).replace('-', '/')
  if (str[0] == '0') {
    str = str.substring(1, str.length)
  }
  return str
}

function computeSunRiseSunSet(Latitude, Longitude, TimeZone) {
  var curTime = new Date()
  // Variable names used: B5, C, C2, C3, CD, D, DR, H, HR, HS, L0, L5, M, MR, MS, N, PI, R1, RD, S1, SC, SD, str
  var retVal = new Object()
  var PI = Math.PI
  var DR = PI / 180
  var RD = 1 / DR
  var B5 = Latitude
  var L5 = Longitude
  var H = -1 * ((curTime.getTimezoneOffset() / 60) * -1) // Local timezone
  // Overriding TimeZone to standardize on UTC
  // H = 0;
  var M = curTime.getMonth() + 1
  var D = curTime.getDate()
  B5 = DR * B5
  var N = parseInt((275 * M) / 9) - 2 * parseInt((M + 9) / 12) + D - 30
  var L0 = 4.8771 + 0.0172 * (N + 0.5 - L5 / 360)
  var C = 0.03342 * Math.sin(L0 + 1.345)
  var C2 = RD * (Math.atan(Math.tan(L0 + C)) - Math.atan(0.9175 * Math.tan(L0 + C)) - C)
  var SD = 0.3978 * Math.sin(L0 + C)
  var CD = Math.sqrt(1 - SD * SD)
  var SC = (SD * Math.sin(B5) + 0.0145) / (Math.cos(B5) * CD)
  if (Math.abs(SC) <= 1) {
    var C3 = RD * Math.atan(SC / Math.sqrt(1 - SC * SC))
    var R1 = 6 - H - (L5 + C2 + C3) / 15
    var HR = parseInt(R1)
    var MR = parseInt((R1 - HR) * 60)
    retVal.SunRise = parseTime(HR + ':' + MR)
    var TargetTimezoneOffset =
      TimeZone * 60 * 60 * 1000 + retVal.SunRise.getTimezoneOffset() * 60 * 1000
    var transformedSunRise = new Date(retVal.SunRise.getTime() + TargetTimezoneOffset)
    var strSunRise =
      '日出' +
      transformedSunRise.getHours() +
      ':' +
      (transformedSunRise.getMinutes() < 10
        ? '0' + transformedSunRise.getMinutes()
        : transformedSunRise.getMinutes())
    var S1 = 18 - H - (L5 + C2 - C3) / 15
    var HS = parseInt(S1)
    var MS = parseInt((S1 - HS) * 60)
    retVal.SunSet = parseTime(HS + ':' + MS)
    var transformedSunSet = new Date(retVal.SunSet.getTime() + TargetTimezoneOffset)
    var strSunSet =
      '日落' +
      transformedSunSet.getHours() +
      ':' +
      (transformedSunSet.getMinutes() < 10
        ? '0' + transformedSunSet.getMinutes()
        : transformedSunSet.getMinutes())
    retVal.Noon = new Date((retVal.SunRise.getTime() + retVal.SunSet.getTime()) / 2)
    var transformedNoon = new Date(retVal.Noon.getTime() + TargetTimezoneOffset)
    var strNoon =
      '正午' +
      transformedNoon.getHours() +
      ':' +
      (transformedNoon.getMinutes() < 10
        ? '0' + transformedNoon.getMinutes()
        : transformedNoon.getMinutes())
  } else {
    if (SC > 1) {
      // str="Sun up all day";
      strSunRise = '.'
      strNoon = '.'
      strSunSet = '.'
      var tDate = new Date()
      // Set Sunset to be in the future ...
      retVal.SunSet = new Date(
        tDate.getFullYear() + 1,
        tDate.getMonth(),
        tDate.getDay(),
        tDate.getHours()
      )
      // Set Sunrise to be in the past ...
      retVal.SunRise = new Date(
        tDate.getFullYear() - 1,
        tDate.getMonth(),
        tDate.getDay(),
        tDate.getHours() - 1
      )
    }
    if (SC < -1) {
      // str="Sun down all day";
      strSunRise = '.'
      strNoon = '.'
      strSunSet = '.'
      // Set Sunrise and Sunset to be in the future ...
      retVal.SunRise = new Date(
        tDate.getFullYear() + 1,
        tDate.getMonth(),
        tDate.getDay(),
        tDate.getHours()
      )
      retVal.SunSet = new Date(
        tDate.getFullYear() + 1,
        tDate.getMonth(),
        tDate.getDay(),
        tDate.getHours()
      )
    }
  }
  retVal.strSunRise = strSunRise
  retVal.strNoon = strNoon
  retVal.strSunSet = strSunSet
  retVal.str = strSunRise + ' | ' + strNoon + ' | ' + strSunSet
  return retVal
}

//
// parseTime(string aTime) - takes a string of time in the format HH:MM:SS
//                           and returns Javascript Date Object
//

function parseTime(aTime) {
  var aDateTimeObject = 'none'
  if (aTime !== undefined && aTime.length) {
    aDateTimeObject = GMTTime()
    try {`在这里插入代码片`
      var theHour = parseInt(aTime.split(':')[0])
      var theMinutes = parseInt(aTime.split(':')[1])
      aDateTimeObject.setHours(theHour)
      aDateTimeObject.setMinutes(theMinutes)
    } catch (ex) {}
  }
  return aDateTimeObject
}

//
// GMTTime() - returns time adjusted to GMT (Universal Time)
//

function GMTTime() {
  var aDate = new Date()
  var aDateAdjustedToGMTInMS = aDate.getTime() + aDate.getTimezoneOffset() * 60 * 1000
  return new Date(aDateAdjustedToGMTInMS)
}