徐烜 / bsth-ebus-h5_editor · Commits

Commit d1158a4321d15d878c55f7c71679c551a7e7834f

Authored by 徐烜
1 parent 2bff6784

电子站牌项目 

1、添加自定义天气组件（bsth-weather-realtime.js，bsth-weather.css，weatherRealtimeData.js）
2、修改index.js，导入自定义天气组件
Inline Side-by-side
Showing 5 changed files with 575 additions and 2 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
  View file @d1158a4
... ... @@ -97,7 +97,7 @@ export default {
97 97 // 图内层css
98 98 _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
99 99 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
100   - chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
  100 + chart_right_padding: PropTypes.number({ label: '内部线路图距离右边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
101 101 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
102 102 chart_station_name_max_size: PropTypes.number({ label: '站定名显示最大文字个数', defaultValue: 7, layout: { prefixCls: 'bsth-line' } }),
103 103 chart_up_line_path_s_color: PropTypes.color({ label: '上行线颜色', defaultValue: '#5E96D2', layout: { prefixCls: 'bsth-line' } }),
... ... @@ -226,7 +226,7 @@ export default {
226 226 }, self.watchWidthHeightTimer.millisecond)
227 227 },
228 228 /**
229   - * 当组件作为自组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
  229 + * 当组件作为子组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
230 230 * 必须由父组件设定，自组件需要监控改变
231 231 */
232 232 line_chart_outer_div_width: function (val) {
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-weather-realtime.js 0 → 100644
  View file @d1158a4
  1 +/**
  2 + * 自定义天气组件（实时天气）。
  3 + * 注：内部使用和风api获取天气数据
  4 + */
  5 +import PropTypes from '@luban-h5/plugin-common-props'
  6 +import './bsth-weather.css'
  7 +import WeatherRealtimeData from 'core/plugins/bsth/models/weatherRealtimeData'
  8 +
  9 +export default {
  10 + extra: {
  11 + defaultStyle: { // 默认属性
  12 + top: 0,
  13 + left: 0,
  14 + width: 260,
  15 + height: 160
  16 + }
  17 + },
  18 + name: 'bsth-weather-realtime',
  19 + data () {
  20 + // eslint-disable-next-line
  21 + this.private_jQuery = jQuery.noConflict() // jquery引用
  22 + return {
  23 + weatherRealtimeData: null, // 内部数据对象
  24 + initLoading: true,
  25 + initLoadingText: '',
  26 + weatherRealtimeDataTimer: { // 天气数据定时器
  27 + timer: null,
  28 + init: false, // 第一次获取数据是否成功
  29 + count: 0,
  30 + millisecond: 600000
  31 + },
  32 +
  33 + /**
  34 + * 监控外层元素的宽度高度变化
  35 + * 1、由于编辑器缩放，自定义组件无法监控，所以需要定义一个定时器监控最外层元素的大小变化
  36 + * 2、建议所有自定义组件，最外层都定义一个div包在自定义组件最外层，不要关联任何自定义的属性，样式对应编辑器的通用样式
  37 + */
  38 + watchWidthHeightTimer: {
  39 + timer: null,
  40 + count: 0,
  41 + millisecond: 1000
  42 + },
  43 + weather_diagram_width: 260, // 图宽度
  44 + weather_diagram_height: 160 // 图高度
  45 + }
  46 + },
  47 + props: {
  48 + useMode: PropTypes.string({ // 自定义使用模式，alone:（单独使用），child:（子组件）
  49 + defaultValue: 'alone',
  50 + label: '使用模式',
  51 + visible: false
  52 + }),
  53 + editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
  54 + defaultValue: 'preview',
  55 + label: '模式',
  56 + visible: false
  57 + }),
  58 + weather_outer_div_width: PropTypes.number({
  59 + defaultValue: 260,
  60 + label: 'line-chart-outer-div样式的div宽度',
  61 + visible: false
  62 + }),
  63 + weather_outer_div_height: PropTypes.number({
  64 + defaultValue: 160,
  65 + label: 'line-chart-outer-div样式的div高度',
  66 + visible: false
  67 + }),
  68 +
  69 + // 图外层css
  70 + _flag_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>) } }),
  71 + margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  72 + margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  73 + margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  74 + margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  75 + border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
  76 + background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  77 + // 图内层css
  78 + _flag_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
  79 + weather_left_padding: PropTypes.number({ label: '内部图距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  80 + weather_right_padding: PropTypes.number({ label: '内部图距离右边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  81 + weather_top_padding: PropTypes.number({ label: '内部图距离上边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  82 + weather_bottom_padding: PropTypes.number({ label: '内部图距离下边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  83 + // 温度信息相关css
  84 + _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="温度信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
  85 + weather_cond_heigth: PropTypes.number({ label: '温度布局高度', defaultValue: 70, layout: { prefixCls: 'bsth-line' } }),
  86 + weather_cond_temp_font_size: PropTypes.number({ label: '温度字体大小', defaultValue: 43, layout: { prefixCls: 'bsth-line' } }),
  87 + weather_cond_temp_font_color: PropTypes.color({ label: '温度字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  88 + weather_cond_temp_heigth: PropTypes.number({ label: '温度内容高度', defaultValue: 41, layout: { prefixCls: 'bsth-line' } }),
  89 + weather_cond_temp_text_font_size: PropTypes.number({ label: '温度文字字体大小', defaultValue: 17, layout: { prefixCls: 'bsth-line' } }),
  90 + weather_cond_temp_text_font_color: PropTypes.color({ label: '温度文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  91 + weather_cond_temp_text_height: PropTypes.number({ label: '温度文字内容高度', defaultValue: 90, layout: { prefixCls: 'bsth-line' } }),
  92 + weather_cond_temp_text_left_padding: PropTypes.number({ label: '温度文字距离左边padding', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
  93 + // 风信息相关css
  94 + _flag_4_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="风信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
  95 + weather_wind_dir_font_size: PropTypes.number({ label: '风向字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  96 + weather_wind_dir_font_color: PropTypes.color({ label: '风向字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  97 + weather_wind_pow_font_size: PropTypes.number({ label: '风力字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  98 + weather_wind_pow_font_color: PropTypes.color({ label: '风力字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  99 + weather_wind_pow_left_padding: PropTypes.number({ label: '风力文字距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  100 + // 空气信息相关css
  101 + _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="空气信息相关css属性" class="bsth-line-item-divider"></hr>) } }),
  102 + weather_air_title_font_size: PropTypes.number({ label: '空气质量标题字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  103 + weather_air_title_font_color: PropTypes.color({ label: '空气质量标题字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  104 + weather_air_qua_font_size: PropTypes.number({ label: '空气质量字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  105 + weather_air_qua_font_color: PropTypes.color({ label: '空气质量字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
  106 + weather_air_qua_left_padding: PropTypes.number({ label: '空气质量信息 距离左边padding', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  107 + // 天气图标css
  108 + weather_cond_img_width: PropTypes.number({ label: '天气图标宽度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
  109 + weather_cond_img_height: PropTypes.number({ label: '天气图标高度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } })
  110 + },
  111 + render () {
  112 + const innerDivStyle = {
  113 + 'width': this.weather_diagram_width + 'px',
  114 + 'height': this.weather_diagram_height + 'px',
  115 + 'border': this.border_size + 'px solid black',
  116 + 'margin-left': this.margin_left + 'px',
  117 + 'margin-right': this.margin_right + 'px',
  118 + 'margin-top': this.margin_top + 'px',
  119 + 'margin-bottom': this.margin_bottom + 'px',
  120 + 'background': this.background_color,
  121 + 'position': 'relative',
  122 + 'overflow': 'hidden'
  123 + }
  124 +
  125 + /** 最外层div对应编辑器的通用样式 */
  126 + return (
  127 + <div class="bsth-weather-outer-div">
  128 + <div class="realtime" style={innerDivStyle}>
  129 + {
  130 + this.renderWeatherComponent()
  131 + }
  132 + </div>
  133 + </div>
  134 + )
  135 + },
  136 + created () {
  137 + // 1、创建内部数据对象
  138 + this.weatherRealtimeData = new WeatherRealtimeData(this)
  139 + },
  140 + mounted () {
  141 + // 1、刷新天气数据
  142 + if (this.editorMode === 'edit') {
  143 + this.initLoading = false
  144 + }
  145 + if (this.editorMode === 'preview') {
  146 + this.weatherRealtimeData.updateRealtimeInfo()
  147 + }
  148 +
  149 + // 2、使用外部元素的框架定义图的长宽
  150 + let $jQuery = this.private_jQuery
  151 + this.weather_diagram_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
  152 + this.weather_diagram_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
  153 + if (this.useMode === 'child') {
  154 + this.weather_diagram_width = this.weather_outer_div_width - this.margin_left - this.margin_right
  155 + this.weather_diagram_height = this.weather_outer_div_height - this.margin_top - this.margin_bottom
  156 + }
  157 + // 3、开启外部元素长宽监控计数
  158 + /**
  159 + * 开启外部元素长宽监控逻辑（class='line-chart-outer-div'）
  160 + * 1、使用模式是alone，并且是编辑模式edit
  161 + * 2、preview预览模式下有条件监控
  162 + */
  163 + if (this.useMode === 'alone' && this.editorMode === 'edit') {
  164 + this.watchWidthHeightTimer.count++
  165 + }
  166 + },
  167 + destroyed () {
  168 + // 组件删除的时候，删除监控定时器
  169 + let timer = this.watchWidthHeightTimer.timer
  170 + if (timer) {
  171 + clearTimeout(timer)
  172 + this.watchWidthHeightTimer.timer = null
  173 + }
  174 + let weatherRealtimeDataTimer = this.weatherRealtimeDataTimer.timer
  175 + if (weatherRealtimeDataTimer) {
  176 + clearTimeout(weatherRealtimeDataTimer)
  177 + this.weatherRealtimeDataTimer.timer = null
  178 + }
  179 + },
  180 + watch: {
  181 + 'weatherRealtimeDataTimer.count' () { // 天气数据定时器
  182 + let timer = this.weatherRealtimeDataTimer.timer
  183 + if (timer) {
  184 + try {
  185 + clearTimeout(timer)
  186 + } catch (err) {}
  187 + this.weatherRealtimeDataTimer.timer = null
  188 + }
  189 + let self = this
  190 + this.weatherRealtimeDataTimer.timer = setTimeout(function () {
  191 + self.weatherRealtimeData.updateRealtimeInfo()
  192 + // 判定，如果初始化数据没有成功，则10秒刷新一次
  193 + }, (self.weatherRealtimeDataTimer.init ? self.weatherRealtimeDataTimer.millisecond : 10000))
  194 + },
  195 + 'watchWidthHeightTimer.count' () { // 定时器监控
  196 + let timer = this.watchWidthHeightTimer.timer
  197 + if (timer) {
  198 + clearTimeout(timer)
  199 + this.watchWidthHeightTimer.timer = null
  200 + }
  201 +
  202 + let self = this
  203 + let $jQuery = this.private_jQuery
  204 + self.watchWidthHeightTimer.timer = setTimeout(function () {
  205 + // 处理逻辑
  206 + let width = $jQuery(self.$el).width()
  207 + let height = $jQuery(self.$el).height()
  208 +
  209 + if (width !== self.line_width) {
  210 + self.weather_diagram_width = width - self.margin_left - self.margin_right
  211 + }
  212 + if (height !== self.line_height) {
  213 + self.weather_diagram_height = height - self.margin_top - self.margin_bottom
  214 + }
  215 + self.watchWidthHeightTimer.count++
  216 + }, self.watchWidthHeightTimer.millisecond)
  217 + },
  218 + /**
  219 + * 当组件作为子组件使用时（useMode=child），bsth_weather-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
  220 + * 必须由父组件设定，自组件需要监控改变
  221 + */
  222 + weather_outer_div_width: function (val) {
  223 + let self = this
  224 + if (self.useMode === 'child') {
  225 + self.weather_diagram_width = val - self.margin_left - self.margin_right
  226 + }
  227 + },
  228 + weather_outer_div_height: function (val) {
  229 + let self = this
  230 + if (self.useMode === 'child') {
  231 + self.weather_diagram_height = val - self.margin_top - self.margin_bottom
  232 + }
  233 + },
  234 +
  235 + // ----------- 图外层css 监控 ----------- //
  236 + margin_left () {
  237 + let self = this
  238 + self.weather_diagram_width = self.weather_diagram_width - self.margin_left - self.margin_right
  239 + },
  240 + margin_right () {
  241 + let self = this
  242 + self.weather_diagram_width = self.weather_diagram_width - self.margin_left - self.margin_right
  243 + },
  244 + margin_top () {
  245 + let self = this
  246 + self.weather_diagram_height = self.weather_diagram_height - self.margin_top - self.margin_bottom
  247 + },
  248 + margin_bottom () {
  249 + let self = this
  250 + self.weather_diagram_height = self.weather_diagram_height - self.margin_top - self.margin_bottom
  251 + }
  252 +
  253 + },
  254 + methods: {
  255 + renderWeatherComponent () {
  256 + const weatherDivStyle = {
  257 + 'display': 'flex',
  258 + 'padding-left': this.weather_left_padding + 'px',
  259 + 'padding-right': this.weather_right_padding + 'px',
  260 + 'padding-top': this.weather_top_padding + 'px',
  261 + 'padding-bottom': this.weather_bottom_padding + 'px'
  262 + }
  263 +
  264 + const weatherCondStyle = {
  265 + 'display': 'flex',
  266 + 'height': this.weather_cond_heigth + 'px'
  267 + }
  268 + const weatherCondTempStyle = {
  269 + 'font-size': this.weather_cond_temp_font_size + 'px',
  270 + 'height': this.weather_cond_temp_heigth + 'px',
  271 + 'color': this.weather_cond_temp_font_color
  272 + }
  273 + const weatherCondTempTextStyle = {
  274 + 'font-size': this.weather_cond_temp_text_font_size + 'px',
  275 + 'color': this.weather_cond_temp_text_font_color,
  276 + 'line-height': this.weather_cond_temp_text_height + 'px',
  277 + 'padding-left': this.weather_cond_temp_text_left_padding + 'px'
  278 + }
  279 +
  280 + const weatherWindStyle = {
  281 + 'display': 'flex'
  282 + }
  283 + const weatherWindDirStyle = {
  284 + 'font-size': this.weather_wind_dir_font_size + 'px',
  285 + 'color': this.weather_wind_dir_font_color
  286 + }
  287 + const weatherWindPowStyle = {
  288 + 'font-size': this.weather_wind_pow_font_size + 'px',
  289 + 'color': this.weather_wind_pow_font_color,
  290 + 'padding-left': this.weather_wind_pow_left_padding + 'px'
  291 + }
  292 +
  293 + const weatherAirStyle = {
  294 + 'display': 'flex'
  295 + }
  296 + const weatherAirTitleStyle = {
  297 + 'font-size': this.weather_air_title_font_size + 'px',
  298 + 'color': this.weather_air_title_font_color
  299 + }
  300 + const weatherAirQuaStyle = {
  301 + 'font-size': this.weather_air_qua_font_size + 'px',
  302 + 'color': this.weather_air_qua_font_color,
  303 + 'padding-left': this.weather_air_qua_left_padding + 'px'
  304 + }
  305 +
  306 + const weatherCondImgStyle = {
  307 + 'width': this.weather_cond_img_width + 'px',
  308 + 'height': this.weather_cond_img_height + 'px'
  309 + }
  310 +
  311 + return (
  312 + <a-spin tip={this.initLoadingText} spinning={this.initLoading} size="large" wrapperClassName="myspin">
  313 + <div style={weatherDivStyle}>
  314 + <div>
  315 + <div style={weatherCondStyle} class="cond">
  316 + <p style={weatherCondTempStyle} class="temperature">{this.weatherRealtimeData.condTemperature}</p>
  317 + <p style={weatherCondTempTextStyle} class="temperature_text">{this.weatherRealtimeData.condTemperatureText}</p>
  318 + </div>
  319 + <div style={weatherWindStyle} class="wind">
  320 + <p style={weatherWindDirStyle} class="direction">{this.weatherRealtimeData.windDirection}</p>
  321 + <p style={weatherWindPowStyle} class="power">{this.weatherRealtimeData.windPower}</p>
  322 + </div>
  323 + <div style={weatherAirStyle} class="air">
  324 + <p style={weatherAirTitleStyle} class="quaility_title">空气质量</p>
  325 + <p style={weatherAirQuaStyle} class="quaility">{this.weatherRealtimeData.airQuaility} {this.weatherRealtimeData.airQuailityText}</p>
  326 + </div>
  327 + </div>
  328 + <div>
  329 + <img style={weatherCondImgStyle} src={this.weatherRealtimeData.condTemperatureTextIcon} />
  330 + </div>
  331 + </div>
  332 + </a-spin>
  333 + )
  334 + }
  335 + }
  336 +}
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-weather.css 0 → 100644
  View file @d1158a4
  1 +.bsth-weather-outer-div, .bsth-weather-outer-div * {
  2 + box-sizing: border-box;
  3 +}
  4 +
  5 +/* 实时天气css */
  6 +.realtime .cond { /* 温度信息布局 */
  7 + display: flex;
  8 + height: 70px;
  9 + overflow: hidden;
  10 + text-overflow:ellipsis;
  11 + white-space: nowrap;
  12 +}
  13 +.realtime .cond .temperature { /* 温度 */
  14 + font-size: 43px;
  15 + height: 41px;
  16 + text-align: left;
  17 +}
  18 +.realtime .cond .temperature_text { /* 温度文字 */
  19 + font-size: 17px;
  20 + line-height: 90px;
  21 + padding-left: 15px;
  22 + text-align: left;
  23 +}
  24 +
  25 +.realtime .wind { /* 风级信息布局 */
  26 + display: flex;
  27 + overflow: hidden;
  28 + text-overflow:ellipsis;
  29 + white-space: nowrap;
  30 +}
  31 +.realtime .wind .direction { /* 风向 */
  32 + font-size: 16px;
  33 + text-align: left;
  34 +}
  35 +.realtime .wind .power { /* 风力 */
  36 + font-size: 16px;
  37 + padding-left: 10px;
  38 + text-align: left;
  39 +}
  40 +
  41 +.realtime .air { /* 空气信息布局 */
  42 + display: flex;
  43 + overflow: hidden;
  44 + text-overflow:ellipsis;
  45 + white-space: nowrap;
  46 +}
  47 +.realtime .air ,quaility_title { /* 标题 */
  48 + font-size: 16px;
  49 + text-align: left;
  50 +}
  51 +.realtime .air .quaility { /* 质量 */
  52 + font-size: 16px;
  53 + padding-left: 10px;
  54 + text-align: left;
  55 +}
  56 +
  57 +.myspin .ant-spin-blur {
  58 + opacity: 0;
  59 +}
... ...
front-end/h5/src/components/core/plugins/bsth/models/weatherRealtimeData.js 0 → 100644
  View file @d1158a4
  1 +/**
  2 + * 实时天气组件（bsth-weather-realtime）内部数据类。
  3 + */
  4 +
  5 +import axios from 'axios'
  6 +
  7 +class WeatherRealtimeData {
  8 + constructor (weatherRealtimeComponent) {
  9 + // 对应的天气组件实例
  10 + this._weatherRealtimeComponent = weatherRealtimeComponent
  11 + // -------------- 内部数据属性 --------------- //
  12 + this.condTemperature = _defaultCondTemperature // 温度
  13 + this.condTemperatureText = _defaultCondTemperatureText // 温度描述
  14 + this.condTemperatureTextIcon = _defaultCondTemperatureTextIcon // 温度描述icon
  15 + this.windDirection = _defaultWindDirection // 风向
  16 + this.windPower = _defaultWindPower // 风力
  17 + this.airQuaility = _defaultAirQuaility // 空气质量指数
  18 + this.airQuailityText = _defaultAirQuailityText // 空气质量描述
  19 + }
  20 +
  21 + // ----------------- 方法 --------------- //
  22 + updateRealtimeInfo () {
  23 + // TODO：由于v7开发者版本的版权问题，先用s6免费版本，等s6免费版本过期后再议
  24 + _privateUpdateRealTimeInfoOfS6.call(this)
  25 + // _privateUpdateRealTimeInfoOfV7.call(this)
  26 + }
  27 +}
  28 +
  29 +// ------------- 默认数据 ------------- //
  30 +let _defaultCondTemperature = '28℃'
  31 +let _defaultCondTemperatureText = '晴'
  32 +let _defaultCondTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/100.png'
  33 +let _defaultWindDirection = '南风'
  34 +let _defaultWindPower = '2级'
  35 +let _defaultAirQuaility = '21'
  36 +let _defaultAirQuailityText = '优'
  37 +// ------------- 和风天气调用url相关数据 -------------//
  38 +let _qKey = 'b34179d047c74311a2e91c8ad99856d6' // 调用使用的key
  39 +
  40 +let _qWeatherV7Url = 'https://devapi.qweather.com/v7/weather/' // v7版本的实时天气信息调用url
  41 +let _qAirV7Url = 'https://devapi.qweather.com/v7/air/' // v7版本的实时空气信息调用url
  42 +let _qWeatherV7Axios = axios.create({ baseURL: _qWeatherV7Url, timeout: 50000 })
  43 +let _qAirV7Axios = axios.create({ baseURL: _qAirV7Url, timeout: 50000 })
  44 +/**
  45 + * 使用和风最新的V7版本的api获取天气信息，但是目前使用的是开发版本，用到商业项目上可能呵呵。
  46 + */
  47 +function _privateUpdateRealTimeInfoOfV7 () {
  48 + this._weatherRealtimeComponent.initLoading = true
  49 + this._weatherRealtimeComponent.initLoadingText = '获取天气数据...'
  50 +
  51 + _qWeatherV7Axios.get('/now', {
  52 + params: {
  53 + location: 101020100, // 上海的locationId
  54 + key: _qKey
  55 + }
  56 + }).then(res => {
  57 + this._weatherRealtimeComponent.initLoadingText = '获取温度数据...'
  58 + let _data = res.data
  59 + if (_data.code === '200') {
  60 + this.condTemperature = _data['now']['temp'] + '℃'
  61 + this.condTemperatureText = _data['now']['text']
  62 + this.condTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/' + _data['now']['icon'] + '.png'
  63 + this.windDirection = _data['now']['windDir']
  64 + this.windPower = _data['now']['windScale'] + '级'
  65 +
  66 + return _qAirV7Axios.get('', {
  67 + params: {
  68 + location: 101020100, // 上海的locationId
  69 + key: _qKey
  70 + }
  71 + })
  72 + } else {
  73 + return res
  74 + }
  75 + }).then(res => {
  76 + this._weatherRealtimeComponent.initLoadingText = '获取空气质量数据...'
  77 + let _data = res.data
  78 + if (res.code === '200') {
  79 + this.airQuaility = _data['now']['aqi']
  80 + this.airQuailityText = _data['now']['category']
  81 + } else {
  82 + this._weatherRealtimeComponent.initLoadingText = res.code === '200'
  83 + }
  84 + }).catch(err => {
  85 + console.log(err.message)
  86 + this._weatherRealtimeComponent.initLoadingText = err.message
  87 + }).then(() => {
  88 + this._weatherRealtimeComponent.weatherRealtimeDataTimer.count++
  89 + if (!this._weatherRealtimeComponent.weatherRealtimeDataTimer.init) {
  90 + // 初始化数据没有成功（第一次获取天气没有成功），则界面还要显示载入中动画
  91 + this._weatherRealtimeComponent.initLoading = true
  92 + this._weatherRealtimeComponent.initLoadingText += '，等待10秒后再次获取...'
  93 + } else {
  94 + this._weatherRealtimeComponent.initLoading = false
  95 + this._weatherRealtimeComponent.initLoadingText = ''
  96 + }
  97 + })
  98 +}
  99 +
  100 +let _qWeatherS6Url = 'https://free-api.heweather.net/s6/weather/' // s6版本的天气信息调用url
  101 +let _qAirS6Url = 'https://free-api.heweather.net/s6/air/' // s6版本的天气信息调用url
  102 +let _qWeatherS6Axios = axios.create({ baseURL: _qWeatherS6Url, timeout: 50000 })
  103 +let _qAirS6Axios = axios.create({ baseURL: _qAirS6Url, timeout: 50000 })
  104 +/**
  105 + * 使用和风s6版本的api获取天气信息，这个是免费版本，商业上使用无问题，但是：
  106 + * API S6版本将在2021年12月31日停止技术支持，并于2022年12月31日停止服务
  107 + */
  108 +function _privateUpdateRealTimeInfoOfS6 () {
  109 + this._weatherRealtimeComponent.initLoading = true
  110 + this._weatherRealtimeComponent.initLoadingText = '获取天气数据...'
  111 +
  112 + _qWeatherS6Axios.get('/now', {
  113 + params: {
  114 + location: 101020100, // 上海的locationId
  115 + key: _qKey
  116 + }
  117 + }).then(res => {
  118 + this._weatherRealtimeComponent.initLoadingText = '获取温度数据...'
  119 + let _data = res.data
  120 + if (_data['HeWeather6'] && _data['HeWeather6'][0] && _data['HeWeather6'][0].status === 'ok') {
  121 + this.condTemperature = _data['HeWeather6'][0]['now']['tmp'] + '℃'
  122 + this.condTemperatureText = _data['HeWeather6'][0]['now']['cond_txt']
  123 + this.condTemperatureTextIcon = 'https://cdn.heweather.com/cond_icon/' + _data['HeWeather6'][0]['now']['cond_code'] + '.png'
  124 + this.windDirection = _data['HeWeather6'][0]['now']['wind_dir']
  125 + this.windPower = _data['HeWeather6'][0]['now']['wind_sc'] + '级'
  126 +
  127 + return _qAirS6Axios.get('/now', {
  128 + params: {
  129 + location: 101020100, // 上海的locationId
  130 + key: _qKey
  131 + }
  132 + })
  133 + } else {
  134 + return res
  135 + }
  136 + }).then(res => {
  137 + this._weatherRealtimeComponent.initLoadingText = '获取空气质量数据...'
  138 + let _data = res.data
  139 + if (_data['HeWeather6'] && _data['HeWeather6'][0] && _data['HeWeather6'][0].status === 'ok') {
  140 + this.airQuaility = _data['HeWeather6'][0]['air_now_city']['aqi']
  141 + this.airQuailityText = _data['HeWeather6'][0]['air_now_city']['qlty']
  142 + // 成功获取温度和空气质量信息后，设置init为true，并且之后更新数据前端不显示载入动画
  143 + this._weatherRealtimeComponent.weatherRealtimeDataTimer.init = true
  144 + this._weatherRealtimeComponent.initLoading = false
  145 + } else {
  146 + this._weatherRealtimeComponent.initLoadingText = _data['HeWeather6'][0].status
  147 + }
  148 + }).catch(err => {
  149 + console.log(err.message)
  150 + this._weatherRealtimeComponent.initLoadingText = err.message
  151 + }).then(() => {
  152 + this._weatherRealtimeComponent.weatherRealtimeDataTimer.count++
  153 + if (!this._weatherRealtimeComponent.weatherRealtimeDataTimer.init) {
  154 + // 初始化数据没有成功（第一次获取天气没有成功），则界面还要显示载入中动画
  155 + this._weatherRealtimeComponent.initLoading = true
  156 + this._weatherRealtimeComponent.initLoadingText += '，等待10秒后再次获取...'
  157 + } else {
  158 + this._weatherRealtimeComponent.initLoading = false
  159 + this._weatherRealtimeComponent.initLoadingText = ''
  160 + }
  161 + })
  162 +}
  163 +
  164 +export default WeatherRealtimeData
... ...
front-end/h5/src/components/core/plugins/index.js
  View file @d1158a4
... ... @@ -24,6 +24,7 @@ import BsthLineChart from &#39;core/plugins/bsth/bsth-line-chart&#39;
24 24 import BsthLineChartList from 'core/plugins/bsth/bsth-line-chart-list'
25 25 import BsthLineChartScrollList from 'core/plugins/bsth/bsth-line-chart-scrollList'
26 26 import BsthSlide from 'core/plugins/bsth/bsth-slide'
  27 +import BsthWeatherRealtime from 'core/plugins/bsth/bsth-weather-realtime'
27 28  
28 29 export const pluginsList = [
29 30 // {
... ... @@ -358,6 +359,19 @@ export const pluginsList = [
358 359 visible: true,
359 360 name: BsthSlide.name
360 361 // disabled: true
  362 + },
  363 +
  364 + {
  365 + i18nTitle: {
  366 + 'en-US': 'Weather',
  367 + 'zh-CN': '实时天气'
  368 + },
  369 + title: '实时天气',
  370 + icon: 'photo',
  371 + component: BsthWeatherRealtime,
  372 + visible: true,
  373 + name: BsthWeatherRealtime.name
  374 + // disabled: true
361 375 }
362 376 ]
363 377  
... ...