weatherCalendarCardList8_15.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="zt">
  3. <div class="container" :style="{'width':width,'height':height}">
  4. <div class="leftInnerMatrix">
  5. <div v-for="(item,index) in weatherProphetData_8_15" :key="index">
  6. <weatherCalendarCard8_15 ref="weatherCalendarCard8_15"></weatherCalendarCard8_15>
  7. </div>
  8. </div>
  9. </div>
  10. </view>
  11. </template>
  12. <script>
  13. import weatherCalendarCard8_15 from '../../weathercomponents/weatherCalendarCardList8_15/weatherCalendarCard8_15/weatherCalendarCard8_15.vue'
  14. export default {
  15. components: {
  16. "weatherCalendarCard8_15": weatherCalendarCard8_15
  17. },
  18. data: function() {
  19. return {
  20. width: "",
  21. height: "",
  22. weatherProphetData_8_15: [],
  23. // innerMatrixWidth: "",
  24. // innerMatrixHeight: "",
  25. weatherIconsDay: [],
  26. weatherIconsNight: [],
  27. classNameDay: "",
  28. classNameNight: "",
  29. classNameWeatherIconBackgroundColor: []
  30. }
  31. },
  32. created: function() {
  33. },
  34. methods: {
  35. getWeatherData: function(width, height, weatherProphetData_8_15) {
  36. this.width = width + "%";
  37. this.height = height + "px";
  38. this.weatherProphetData_8_15 = weatherProphetData_8_15;
  39. this.weatherIconsDay = [];
  40. this.weatherIconsNight = [];
  41. for (let i = 0; i < weatherProphetData_8_15.length; i++) {
  42. this.weatherIconsDay.push(weatherProphetData_8_15[i].weather1);
  43. this.weatherIconsNight.push(weatherProphetData_8_15[i].weather2);
  44. }
  45. this.commitData();
  46. },
  47. commitData: async function() {
  48. let _this = this;
  49. await uni.request({
  50. url: "http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherTemperatureWindSpeedCardList_8_15,weatherTemperatureWindSpeedCard_8_15,white30&weatherInformation=" +
  51. this.weatherIconsDay, //仅为示例,并非真实接口地址。
  52. data: {
  53. },
  54. method: 'GET',
  55. success: function(res) {
  56. //_this.classNameDay = "";
  57. _this.classNameDay = res.data;
  58. },
  59. fail: (e) => {
  60. console.log(e);
  61. }
  62. });
  63. await uni.request({
  64. url: "http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherTemperatureWindSpeedCardList_8_15,weatherTemperatureWindSpeedCard_8_15,white30&weatherInformation=" +
  65. this.weatherIconsNight, //仅为示例,并非真实接口地址。
  66. data: {
  67. },
  68. method: 'GET',
  69. success: function(res) {
  70. //_this.classNameNight = "";
  71. _this.classNameNight = res.data;
  72. _this.setWeatherIcon();
  73. },
  74. fail: (e) => {
  75. console.log(e);
  76. }
  77. });
  78. },
  79. setWeatherIcon: function() {
  80. this.classNameWeatherIconBackgroundColor = [];
  81. for (let i = 0; i < this.classNameDay.length; i++) {
  82. if (this.classNameDay[i].toLowerCase().search("taiyang") != -1) {
  83. this.classNameWeatherIconBackgroundColor.push("firstGradeBlue");
  84. } else if (this.classNameDay[i].toLowerCase().search("xue") != -1) {
  85. this.classNameWeatherIconBackgroundColor.push("fourGradeBlue");
  86. } else if (this.classNameDay[i].toLowerCase().search("shui") != -1 || this.classNameDay[i].toLowerCase().search(
  87. "sanhenggang") != -1) {
  88. this.classNameWeatherIconBackgroundColor.push("threeGradeBlue");
  89. } else {
  90. this.classNameWeatherIconBackgroundColor.push("twoGradeBlue");
  91. }
  92. }
  93. this.pushWeatherData();
  94. },
  95. pushWeatherData: function() {
  96. for (let i = 0; i < this.weatherProphetData_8_15.length; i++) {
  97. this.$nextTick(function(){
  98. this.$refs.weatherCalendarCard8_15[i].getWeatherData(this.width, this.height,
  99. this.classNameWeatherIconBackgroundColor[i], this.classNameDay[i], this.classNameNight[i], this.weatherProphetData_8_15[
  100. i]);
  101. })
  102. }
  103. }
  104. }
  105. }
  106. </script>
  107. <style scoped="scoped">
  108. </style>