电子站牌项目

1、添加自定义天气组件（bsth-weather-realtime.js，bsth-weather.css，weatherRealtimeData.js） 2、修改index.js，导入自定义天气组件

电子站牌项目
1、添加自定义天气组件（bsth-weather-realtime.js，bsth-weather.css，weatherRealtimeData.js） 2、修改index.js，导入自定义天气组件
徐烜
1 parent 2bff6784
Showing 5 changed files with 575 additions and 2 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
front-end/h5/src/components/core/plugins/bsth/bsth-weather-realtime.js
front-end/h5/src/components/core/plugins/bsth/bsth-weather.css
front-end/h5/src/components/core/plugins/bsth/models/weatherRealtimeData.js
front-end/h5/src/components/core/plugins/index.js
@@ -97,7 +97,7 @@ export default {
     // 图内层css
     _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
     chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
-    chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    chart_right_padding: PropTypes.number({ label: '内部线路图距离右边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
     chart_station_name_max_size: PropTypes.number({ label: '站定名显示最大文字个数', defaultValue: 7, layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_path_s_color: PropTypes.color({ label: '上行线颜色', defaultValue: '#5E96D2', layout: { prefixCls: 'bsth-line' } }),
@@ -226,7 +226,7 @@ export default {
       }, self.watchWidthHeightTimer.millisecond)
     },
     /**
-     * 当组件作为自组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
+     * 当组件作为子组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
      * 必须由父组件设定，自组件需要监控改变
      */
     line_chart_outer_div_width: function (val) {
+/**
+ * 自定义天气组件（实时天气）。
+ * 注：内部使用和风api获取天气数据
+ */
+import PropTypes from '@luban-h5/plugin-common-props'
+import './bsth-weather.css'
+import WeatherRealtimeData from 'core/plugins/bsth/models/weatherRealtimeData'
+
+export default {
+  extra: {
+    defaultStyle: { // 默认属性
+      top: 0,
+      left: 0,
+      width: 260,
+      height: 160
+    }
+  },
+  name: 'bsth-weather-realtime',
+  data () {
+    // eslint-disable-next-line
+    this.private_jQuery = jQuery.noConflict() // jquery引用
+    return {
+      weatherRealtimeData: null, // 内部数据对象
+      initLoading: true,
+      initLoadingText: '',
+      weatherRealtimeDataTimer: { // 天气数据定时器
+        timer: null,
+        init: false, // 第一次获取数据是否成功
+        count: 0,
+        millisecond: 600000
+      },
+
+      /**
+       * 监控外层元素的宽度高度变化
+       * 1、由于编辑器缩放，自定义组件无法监控，所以需要定义一个定时器监控最外层元素的大小变化
+       * 2、建议所有自定义组件，最外层都定义一个div包在自定义组件最外层，不要关联任何自定义的属性，样式对应编辑器的通用样式
+       */
+      watchWidthHeightTimer: {
+        timer: null,
+        count: 0,
+        millisecond: 1000
+      },
+      weather_diagram_width: 260, // 图宽度
+      weather_diagram_height: 160 // 图高度
+    }
+  },
+  props: {
+    useMode: PropTypes.string({ // 自定义使用模式，alone:（单独使用），child:（子组件）
+      defaultValue: 'alone',
+      label: '使用模式',
+      visible: false
+    }),
+    editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
+      defaultValue: 'preview',
+      label: '模式',
+      visible: false
+    }),
+    weather_outer_div_width: PropTypes.number({
+      defaultValue: 260,
+      label: 'line-chart-outer-div样式的div宽度',
+      visible: false
+    }),
+    weather_outer_div_height: PropTypes.number({
+      defaultValue: 160,
+      label: 'line-chart-outer-div样式的div高度',
+      visible: false
+    }),
+
+    // 图外层css
+    _flag_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>) } }),
+    margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
+    background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    // 图内层css
+    _flag_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
+    weather_left_padding: PropTypes.number({ label: '内部图距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    weather_right_padding: PropTypes.number({ label: '内部图距离右边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    weather_top_padding: PropTypes.number({ label: '内部图距离上边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    weather_bottom_padding: PropTypes.number({ label: '内部图距离下边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    // 温度信息相关css
+    _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="温度信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
+    weather_cond_heigth: PropTypes.number({ label: '温度布局高度', defaultValue: 70, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_font_size: PropTypes.number({ label: '温度字体大小', defaultValue: 43, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_font_color: PropTypes.color({ label: '温度字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_heigth: PropTypes.number({ label: '温度内容高度', defaultValue: 41, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_text_font_size: PropTypes.number({ label: '温度文字字体大小', defaultValue: 17, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_text_font_color: PropTypes.color({ label: '温度文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_text_height: PropTypes.number({ label: '温度文字内容高度', defaultValue: 90, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_temp_text_left_padding: PropTypes.number({ label: '温度文字距离左边padding', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
+    // 风信息相关css
+    _flag_4_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="风信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
+    weather_wind_dir_font_size: PropTypes.number({ label: '风向字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    weather_wind_dir_font_color: PropTypes.color({ label: '风向字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_wind_pow_font_size: PropTypes.number({ label: '风力字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    weather_wind_pow_font_color: PropTypes.color({ label: '风力字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_wind_pow_left_padding: PropTypes.number({ label: '风力文字距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    // 空气信息相关css
+    _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="空气信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
+    weather_air_title_font_size: PropTypes.number({ label: '空气质量标题字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    weather_air_title_font_color: PropTypes.color({ label: '空气质量标题字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_air_qua_font_size: PropTypes.number({ label: '空气质量字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    weather_air_qua_font_color: PropTypes.color({ label: '空气质量字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_air_qua_left_padding: PropTypes.number({ label: '空气质量信息 距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    // 天气图标css
+    weather_cond_img_width: PropTypes.number({ label: '天气图标宽度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
+    weather_cond_img_height: PropTypes.number({ label: '天气图标高度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } })
+  },
+  render () {
+    const innerDivStyle = {
+      'width': this.weather_diagram_width + 'px',
+      'height': this.weather_diagram_height + 'px',
+      'border': this.border_size + 'px solid black',
+      'margin-left': this.margin_left + 'px',
+      'margin-right': this.margin_right + 'px',
+      'margin-top': this.margin_top + 'px',
+      'margin-bottom': this.margin_bottom + 'px',
+      'background': this.background_color,
+      'position': 'relative',
+      'overflow': 'hidden'
+    }
+
+    /** 最外层div对应编辑器的通用样式 */
+    return (
+      <div class="bsth-weather-outer-div">
+        <div class="realtime" style={innerDivStyle}>
+          {
+            this.renderWeatherComponent()
+          }
+        </div>
+      </div>
+    )
+  },
+  created () {
+    // 1、创建内部数据对象
+    this.weatherRealtimeData = new WeatherRealtimeData(this)
+  },
+  mounted () {
+    // 1、刷新天气数据
+    if (this.editorMode === 'edit') {
+      this.initLoading = false
+    }
+    if (this.editorMode === 'preview') {
+      this.weatherRealtimeData.updateRealtimeInfo()
+    }
+
+    // 2、使用外部元素的框架定义图的长宽
+    let $jQuery = this.private_jQuery
+    this.weather_diagram_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
+    this.weather_diagram_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
+    if (this.useMode === 'child') {
+      this.weather_diagram_width = this.weather_outer_div_width - this.margin_left - this.margin_right
+      this.weather_diagram_height = this.weather_outer_div_height - this.margin_top - this.margin_bottom
+    }
+    // 3、开启外部元素长宽监控计数
+    /**
+     * 开启外部元素长宽监控逻辑（class='line-chart-outer-div'）
+     * 1、使用模式是alone，并且是编辑模式edit
+     * 2、preview预览模式下有条件监控
+     */
+    if (this.useMode === 'alone' && this.editorMode === 'edit') {
+      this.watchWidthHeightTimer.count++
+    }
+  },
+  destroyed () {
+    // 组件删除的时候，删除监控定时器
+    let timer = this.watchWidthHeightTimer.timer
+    if (timer) {
+      clearTimeout(timer)
+      this.watchWidthHeightTimer.timer = null
+    }
+    let weatherRealtimeDataTimer = this.weatherRealtimeDataTimer.timer
+    if (weatherRealtimeDataTimer) {
+      clearTimeout(weatherRealtimeDataTimer)
+      this.weatherRealtimeDataTimer.timer = null
+    }
+  },
+  watch: {
+    'weatherRealtimeDataTimer.count' () { // 天气数据定时器
+      let timer = this.weatherRealtimeDataTimer.timer
+      if (timer) {
+        try {
+          clearTimeout(timer)
+        } catch (err) {}
+        this.weatherRealtimeDataTimer.timer = null
+      }
+      let self = this
+      this.weatherRealtimeDataTimer.timer = setTimeout(function () {
+        self.weatherRealtimeData.updateRealtimeInfo()
+        // 判定，如果初始化数据没有成功，则10秒刷新一次
+      }, (self.weatherRealtimeDataTimer.init ? self.weatherRealtimeDataTimer.millisecond : 10000))
+    },
+    'watchWidthHeightTimer.count' () { // 定时器监控
+      let timer = this.watchWidthHeightTimer.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.watchWidthHeightTimer.timer = null
+      }
+
+      let self = this
+      let $jQuery = this.private_jQuery
+      self.watchWidthHeightTimer.timer = setTimeout(function () {
+        // 处理逻辑
+        let width = $jQuery(self.$el).width()
+        let height = $jQuery(self.$el).height()
+
+        if (width !== self.line_width) {
+          self.weather_diagram_width = width - self.margin_left - self.margin_right
+        }
+        if (height !== self.line_height) {
+          self.weather_diagram_height = height - self.margin_top - self.margin_bottom
+        }
+        self.watchWidthHeightTimer.count++
+      }, self.watchWidthHeightTimer.millisecond)
+    },
+    /**
+     * 当组件作为子组件使用时（useMode=child），bsth_weather-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
+     * 必须由父组件设定，自组件需要监控改变
+     */
+    weather_outer_div_width: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.weather_diagram_width = val - self.margin_left - self.margin_right
+      }
+    },
+    weather_outer_div_height: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.weather_diagram_height = val - self.margin_top - self.margin_bottom
+      }
+    },
+
+    // ----------- 图外层css 监控 ----------- //
+    margin_left () {
+      let self = this
+      self.weather_diagram_width = self.weather_diagram_width - self.margin_left - self.margin_right
+    },
+    margin_right () {
+      let self = this
+      self.weather_diagram_width = self.weather_diagram_width - self.margin_left - self.margin_right
+    },
+    margin_top () {
+      let self = this
+      self.weather_diagram_height = self.weather_diagram_height - self.margin_top - self.margin_bottom
+    },
+    margin_bottom () {
+      let self = this
+      self.weather_diagram_height = self.weather_diagram_height - self.margin_top - self.margin_bottom
+    }
+
+  },
+  methods: {
+    renderWeatherComponent () {
+      const weatherDivStyle = {
+        'display': 'flex',
+        'padding-left': this.weather_left_padding + 'px',
+        'padding-right': this.weather_right_padding + 'px',
+        'padding-top': this.weather_top_padding + 'px',
+        'padding-bottom': this.weather_bottom_padding + 'px'
+      }
+
+      const weatherCondStyle = {
+        'display': 'flex',
+        'height': this.weather_cond_heigth + 'px'
+      }
+      const weatherCondTempStyle = {
+        'font-size': this.weather_cond_temp_font_size + 'px',
+        'height': this.weather_cond_temp_heigth + 'px',
+        'color': this.weather_cond_temp_font_color
+      }
+      const weatherCondTempTextStyle = {
+        'font-size': this.weather_cond_temp_text_font_size + 'px',
+        'color': this.weather_cond_temp_text_font_color,
+        'line-height': this.weather_cond_temp_text_height + 'px',
+        'padding-left': this.weather_cond_temp_text_left_padding + 'px'
+      }
+
+      const weatherWindStyle = {
+        'display': 'flex'
+      }
+      const weatherWindDirStyle = {
+        'font-size': this.weather_wind_dir_font_size + 'px',
+        'color': this.weather_wind_dir_font_color
+      }
+      const weatherWindPowStyle = {
+        'font-size': this.weather_wind_pow_font_size + 'px',
+        'color': this.weather_wind_pow_font_color,
+        'padding-left': this.weather_wind_pow_left_padding + 'px'
+      }
+
+      const weatherAirStyle = {
+        'display': 'flex'
+      }
+      const weatherAirTitleStyle = {
+        'font-size': this.weather_air_title_font_size + 'px',
+        'color': this.weather_air_title_font_color
+      }
+      const weatherAirQuaStyle = {
+        'font-size': this.weather_air_qua_font_size + 'px',
+        'color': this.weather_air_qua_font_color,
+        'padding-left': this.weather_air_qua_left_padding + 'px'
+      }
+
+      const weatherCondImgStyle = {
+        'width': this.weather_cond_img_width + 'px',
+        'height': this.weather_cond_img_height + 'px'
+      }
+
+      return (
+        <a-spin tip={this.initLoadingText} spinning={this.initLoading} size="large" wrapperClassName="myspin">
+          <div style={weatherDivStyle}>
+            <div>
+              <div style={weatherCondStyle} class="cond">
+                <p style={weatherCondTempStyle} class="temperature">{this.weatherRealtimeData.condTemperature}</p>
+                <p style={weatherCondTempTextStyle} class="temperature_text">{this.weatherRealtimeData.condTemperatureText}</p>
+              </div>
+              <div style={weatherWindStyle} class="wind">
+                <p style={weatherWindDirStyle} class="direction">{this.weatherRealtimeData.windDirection}</p>
+                <p style={weatherWindPowStyle} class="power">{this.weatherRealtimeData.windPower}</p>
+              </div>
+              <div style={weatherAirStyle} class="air">
+                <p style={weatherAirTitleStyle} class="quaility_title">空气质量</p>
+                <p style={weatherAirQuaStyle} class="quaility">{this.weatherRealtimeData.airQuaility} {this.weatherRealtimeData.airQuailityText}</p>
+              </div>
+            </div>
+            <div>
+              <img style={weatherCondImgStyle} src={this.weatherRealtimeData.condTemperatureTextIcon} />
+            </div>
+          </div>
+        </a-spin>
+      )
+    }
+  }
+}
+.bsth-weather-outer-div, .bsth-weather-outer-div * {
+    box-sizing: border-box;
+}
+
+/* 实时天气css */
+.realtime .cond { /* 温度信息布局 */
+    display: flex;
+    height: 70px;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.realtime .cond .temperature { /* 温度 */
+    font-size: 43px;
+    height: 41px;
+    text-align: left;
+}
+.realtime .cond .temperature_text { /* 温度文字 */
+    font-size: 17px;
+    line-height: 90px;
+    padding-left: 15px;
+    text-align: left;
+}
+
+.realtime .wind { /* 风级信息布局 */
+    display: flex;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.realtime .wind .direction { /* 风向 */
+    font-size: 16px;
+    text-align: left;
+}
+.realtime .wind .power { /* 风力 */
+    font-size: 16px;
+    padding-left: 10px;
+    text-align: left;
+}
+
+.realtime .air { /* 空气信息布局 */
+    display: flex;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.realtime .air ,quaility_title { /* 标题 */
+    font-size: 16px;
+    text-align: left;
+}
+.realtime .air .quaility { /* 质量 */
+    font-size: 16px;
+    padding-left: 10px;
+    text-align: left;
+}
+
+.myspin .ant-spin-blur {
+    opacity: 0;
+}
+/**
+ * 实时天气组件（bsth-weather-realtime）内部数据类。
+ */
+
+import axios from 'axios'
+
+class WeatherRealtimeData {
+  constructor (weatherRealtimeComponent) {
+    // 对应的天气组件实例
+    this._weatherRealtimeComponent = weatherRealtimeComponent
+    // -------------- 内部数据属性 --------------- //
+    this.condTemperature = _defaultCondTemperature // 温度
+    this.condTemperatureText = _defaultCondTemperatureText // 温度描述
+    this.condTemperatureTextIcon = _defaultCondTemperatureTextIcon // 温度描述icon
+    this.windDirection = _defaultWindDirection // 风向
+    this.windPower = _defaultWindPower // 风力
+    this.airQuaility = _defaultAirQuaility // 空气质量指数
+    this.airQuailityText = _defaultAirQuailityText // 空气质量描述
+  }
+
+  // ----------------- 方法 --------------- //
+  updateRealtimeInfo () {
+    // TODO：由于v7开发者版本的版权问题，先用s6免费版本，等s6免费版本过期后再议
+    _privateUpdateRealTimeInfoOfS6.call(this)
+    // _privateUpdateRealTimeInfoOfV7.call(this)
+  }
+}
+
+// ------------- 默认数据 ------------- //
+let _defaultCondTemperature = '28℃'
+let _defaultCondTemperatureText = '晴'
+let _defaultCondTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/100.png'
+let _defaultWindDirection = '南风'
+let _defaultWindPower = '2级'
+let _defaultAirQuaility = '21'
+let _defaultAirQuailityText = '优'
+// ------------- 和风天气调用url相关数据 -------------//
+let _qKey = 'b34179d047c74311a2e91c8ad99856d6' // 调用使用的key
+
+let _qWeatherV7Url = 'https://devapi.qweather.com/v7/weather/' // v7版本的实时天气信息调用url
+let _qAirV7Url = 'https://devapi.qweather.com/v7/air/' // v7版本的实时空气信息调用url
+let _qWeatherV7Axios = axios.create({ baseURL: _qWeatherV7Url, timeout: 50000 })
+let _qAirV7Axios = axios.create({ baseURL: _qAirV7Url, timeout: 50000 })
+/**
+ * 使用和风最新的V7版本的api获取天气信息，但是目前使用的是开发版本，用到商业项目上可能呵呵。
+ */
+function _privateUpdateRealTimeInfoOfV7 () {
+  this._weatherRealtimeComponent.initLoading = true
+  this._weatherRealtimeComponent.initLoadingText = '获取天气数据...'
+
+  _qWeatherV7Axios.get('/now', {
+    params: {
+      location: 101020100, // 上海的locationId
+      key: _qKey
+    }
+  }).then(res => {
+    this._weatherRealtimeComponent.initLoadingText = '获取温度数据...'
+    let _data = res.data
+    if (_data.code === '200') {
+      this.condTemperature = _data['now']['temp'] + '℃'
+      this.condTemperatureText = _data['now']['text']
+      this.condTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/' + _data['now']['icon'] + '.png'
+      this.windDirection = _data['now']['windDir']
+      this.windPower = _data['now']['windScale'] + '级'
+
+      return _qAirV7Axios.get('', {
+        params: {
+          location: 101020100, // 上海的locationId
+          key: _qKey
+        }
+      })
+    } else {
+      return res
+    }
+  }).then(res => {
+    this._weatherRealtimeComponent.initLoadingText = '获取空气质量数据...'
+    let _data = res.data
+    if (res.code === '200') {
+      this.airQuaility = _data['now']['aqi']
+      this.airQuailityText = _data['now']['category']
+    } else {
+      this._weatherRealtimeComponent.initLoadingText = res.code === '200'
+    }
+  }).catch(err => {
+    console.log(err.message)
+    this._weatherRealtimeComponent.initLoadingText = err.message
+  }).then(() => {
+    this._weatherRealtimeComponent.weatherRealtimeDataTimer.count++
+    if (!this._weatherRealtimeComponent.weatherRealtimeDataTimer.init) {
+      // 初始化数据没有成功（第一次获取天气没有成功），则界面还要显示载入中动画
+      this._weatherRealtimeComponent.initLoading = true
+      this._weatherRealtimeComponent.initLoadingText += '，等待10秒后再次获取...'
+    } else {
+      this._weatherRealtimeComponent.initLoading = false
+      this._weatherRealtimeComponent.initLoadingText = ''
+    }
+  })
+}
+
+let _qWeatherS6Url = 'https://free-api.heweather.net/s6/weather/' // s6版本的天气信息调用url
+let _qAirS6Url = 'https://free-api.heweather.net/s6/air/' // s6版本的天气信息调用url
+let _qWeatherS6Axios = axios.create({ baseURL: _qWeatherS6Url, timeout: 50000 })
+let _qAirS6Axios = axios.create({ baseURL: _qAirS6Url, timeout: 50000 })
+/**
+ * 使用和风s6版本的api获取天气信息，这个是免费版本，商业上使用无问题，但是：
+ * API S6版本将在2021年12月31日停止技术支持，并于2022年12月31日停止服务
+ */
+function _privateUpdateRealTimeInfoOfS6 () {
+  this._weatherRealtimeComponent.initLoading = true
+  this._weatherRealtimeComponent.initLoadingText = '获取天气数据...'
+
+  _qWeatherS6Axios.get('/now', {
+    params: {
+      location: 101020100, // 上海的locationId
+      key: _qKey
+    }
+  }).then(res => {
+    this._weatherRealtimeComponent.initLoadingText = '获取温度数据...'
+    let _data = res.data
+    if (_data['HeWeather6'] && _data['HeWeather6'][0] && _data['HeWeather6'][0].status === 'ok') {
+      this.condTemperature = _data['HeWeather6'][0]['now']['tmp'] + '℃'
+      this.condTemperatureText = _data['HeWeather6'][0]['now']['cond_txt']
+      this.condTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/' + _data['HeWeather6'][0]['now']['cond_code'] + '.png'
+      this.windDirection = _data['HeWeather6'][0]['now']['wind_dir']
+      this.windPower = _data['HeWeather6'][0]['now']['wind_sc'] + '级'
+
+      return _qAirS6Axios.get('/now', {
+        params: {
+          location: 101020100, // 上海的locationId
+          key: _qKey
+        }
+      })
+    } else {
+      return res
+    }
+  }).then(res => {
+    this._weatherRealtimeComponent.initLoadingText = '获取空气质量数据...'
+    let _data = res.data
+    if (_data['HeWeather6'] && _data['HeWeather6'][0] && _data['HeWeather6'][0].status === 'ok') {
+      this.airQuaility = _data['HeWeather6'][0]['air_now_city']['aqi']
+      this.airQuailityText = _data['HeWeather6'][0]['air_now_city']['qlty']
+      // 成功获取温度和空气质量信息后，设置init为true，并且之后更新数据前端不显示载入动画
+      this._weatherRealtimeComponent.weatherRealtimeDataTimer.init = true
+      this._weatherRealtimeComponent.initLoading = false
+    } else {
+      this._weatherRealtimeComponent.initLoadingText = _data['HeWeather6'][0].status
+    }
+  }).catch(err => {
+    console.log(err.message)
+    this._weatherRealtimeComponent.initLoadingText = err.message
+  }).then(() => {
+    this._weatherRealtimeComponent.weatherRealtimeDataTimer.count++
+    if (!this._weatherRealtimeComponent.weatherRealtimeDataTimer.init) {
+      // 初始化数据没有成功（第一次获取天气没有成功），则界面还要显示载入中动画
+      this._weatherRealtimeComponent.initLoading = true
+      this._weatherRealtimeComponent.initLoadingText += '，等待10秒后再次获取...'
+    } else {
+      this._weatherRealtimeComponent.initLoading = false
+      this._weatherRealtimeComponent.initLoadingText = ''
+    }
+  })
+}
+
+export default WeatherRealtimeData
@@ -24,6 +24,7 @@ import BsthLineChart from &#39;core/plugins/bsth/bsth-line-chart&#39;
 import BsthLineChartList from 'core/plugins/bsth/bsth-line-chart-list'
 import BsthLineChartScrollList from 'core/plugins/bsth/bsth-line-chart-scrollList'
 import BsthSlide from 'core/plugins/bsth/bsth-slide'
+import BsthWeatherRealtime from 'core/plugins/bsth/bsth-weather-realtime'
 export const pluginsList = [
   // {
@@ -358,6 +359,19 @@ export const pluginsList = [
     visible: true,
     name: BsthSlide.name
     // disabled: true
+  },
+
+  {
+    i18nTitle: {
+      'en-US': 'Weather',
+      'zh-CN': '实时天气'
+    },
+    title: '实时天气',
+    icon: 'photo',
+    component: BsthWeatherRealtime,
+    visible: true,
+    name: BsthWeatherRealtime.name
+    // disabled: true
   }
 ]