添加新的日期控件

徐烜
1 parent 2818a609
Showing 4 changed files with 688 additions and 0 deletions
front-end/h5/src/components/core/plugins/bsth/weather/css/weather-chart.css
front-end/h5/src/components/core/plugins/bsth/weather/models/WeatherData.js
front-end/h5/src/components/core/plugins/bsth/weather/weather-chart.js
front-end/h5/src/components/core/plugins/index.js
+/*
+    内部使用的是border-box
+    注意：
+    1、这个设置很重要，因为内部计算width是减去两侧border的
+    2、在编辑器模式下，外层的.ant-layout会给内层所有元素设置border-box，此时你不设置无所谓
+    3、但是在打包预览模式下，是没有外层.ant-layout定义的，此时如果组件内部不定义，则会使用content-box，会和内部计算宽度产生偏差
+*/
+.weather-chart-outer-div, .weather-chart-outer-div * {
+    box-sizing: border-box;
+}
+
+/**
+    天气图使用的css
+ */
+svg.weather-chart {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+
+    /* 文本css */
+    font-style: normal;
+    font-variant-ligatures: normal;
+    font-variant-caps: normal;
+    font-variant-numeric: normal;
+    font-variant-east-asian: normal;
+    font-weight: 400;
+    font-stretch: normal;
+    font-size: 14px;
+    line-height: 20px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+// 天气图表数据信息
+
+class WeatherData {
+  /**
+   * 构造函数。
+   */
+  constructor () {
+    /** 城市信息（如：上海） */
+    this._cityInfo = null;
+    /** 天气信息（如：阵雨） */
+    this._weatherInfo = null;
+    /** 温度信息（如：31°C）*/
+    this._temperatureInfo = null;
+  }
+
+  setCityInfo (cityInfo) {
+    this._cityInfo = cityInfo
+    return this
+  }
+  setWeatherInfo (weatherInfo) {
+    this._weatherInfo = weatherInfo
+    return this
+  }
+  setTemperatureInfo (temperatureInfo) {
+    this._temperatureInfo = temperatureInfo
+    return this
+  }
+
+  get cityInfo () {
+    return this._cityInfo
+  }
+  get weatherInfo () {
+    return this._weatherInfo
+  }
+  get temperatureInfo () {
+    return this._temperatureInfo
+  }
+
+  generateSvgData () {
+    let showData = []
+    showData.push({
+      svgD3PartKey: 'cityInfo',
+      text: this._cityInfo,
+      bgProp: 'city_info_background',
+      fsProp: 'city_info_font_size',
+      fcProp: 'city_info_font_color'
+    })
+    showData.push({
+      svgD3PartKey: 'weatherInfo',
+      text: this._weatherInfo,
+      bgProp: 'weather_info_background',
+      fsProp: 'weather_info_font_size',
+      fcProp: 'weather_info_font_color'
+    })
+    showData.push({
+      svgD3PartKey: 'temperatureInfo',
+      text: this._temperatureInfo,
+      bgProp: 'temperature_info_background',
+      fsProp: 'temperature_info_font_size',
+      fcProp: 'temperature_info_font_color'
+    })
+
+    return showData
+  }
+
+  // 远程数据格式参考 http://36.138.68.10:19102/General_Interface/queryWeatherByCity
+  setFromRemoteWeatherInfo (data) {
+    console.log(data)
+    this._cityInfo = data.city || ''
+    this._weatherInfo = data.info || ''
+    this._temperatureInfo = data['temperature'] + '°C'
+  }
+
+  /**
+   * 产生测试数据。
+   */
+  static generateTestData1 () {
+    let wd = new WeatherData()
+    wd.setCityInfo('上海').setWeatherInfo('晴').setTemperatureInfo('37°C')
+    return wd
+  }
+
+}
+
+export {
+  WeatherData
+}
+
+import PropTypes from '@luban-h5/plugin-common-props'
+
+import './css/weather-chart.css'
+import { WeatherData } from 'core/plugins/bsth/weather/models/WeatherData'
+import { jsonp } from 'vue-jsonp'
+
+import axios from 'axios'
+
+export default {
+  extra: {
+    defaultStyle: { // 默认属性
+      top: 0,
+      left: 0,
+      width: 200,
+      height: 50
+    }
+  },
+  name: 'weather-chart',
+  data () {
+    this.private_svgns = 'http://www.w3.org/2000/svg' // svg元素名字空间
+    this.private_svg = null // 创建的根svg元素，由mounted钩子函数创建
+    // eslint-disable-next-line
+    this.private_jQuery = jQuery.noConflict() // jquery引用
+    // eslint-disable-next-line
+    this.private_d3 = d3 // d3引用
+
+    return {
+      /**
+       * 监控外层元素的宽度高度变化
+       * 1、由于编辑器缩放，自定义组件无法监控，所以需要定义一个定时器监控最外层元素的大小变化
+       * 2、建议所有自定义组件，最外层都定义一个div包在自定义组件最外层，不要关联任何自定义的属性，样式对应编辑器的通用样式
+       */
+      watchWidthHeightTimer: {
+        timer: null,
+        count: 0,
+        millisecond: 1000
+      },
+
+      // 注意：css里设定了box-sizing: border-box;，所以组件本身的宽高包括了margin,padding,border
+      //      所以计算内部其他组件宽高需要减去margin,padding,border
+      component_width: 350, // 组件宽度
+      component_height: 400, // 组件高度
+
+      svg_width: 350, // svg根元素的宽度
+      svg_height: 400, // svg根元素的高度
+
+      initLoading: true, // 数据是否正在初始化
+      initLoadingText: '', // 初始化期间的文本显示
+      weatherData: null, // 天气图表数据（WeatherChartData类型）
+      weatherDataTimer: { // 天气数据刷新间隔timer
+        timer: undefined,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    weatherDataAxios () {
+      return axios.create({ baseURL: this.remote_data_url, timeout: 50000 })
+    }
+  },
+  props: {
+    //------------------- 内部不可编辑属性 -----------------------//
+    useMode: PropTypes.string({ // 自定义使用模式，alone:（单独使用），child:（子组件）
+      defaultValue: 'alone',
+      label: '使用模式',
+      visible: false
+    }),
+    editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
+      defaultValue: 'preview',
+      label: '模式',
+      visible: false
+    }),
+    weather_chart_outer_div_width: PropTypes.number({
+      defaultValue: 350,
+      label: 'weather-chart-outer-div样式的div宽度',
+      visible: false
+    }),
+    weather_chart_outer_div_height: PropTypes.number({
+      defaultValue: 300,
+      label: 'weather-chart-outer-div样式的div高度',
+      visible: false
+    }),
+    weatherData_child: { // 作为子组件，父对象传值
+      type: WeatherData,
+      default: function () {
+        return null
+      }
+    },
+
+    //---------------------- 外部编辑器可编辑属性 -----------------------//
+    // 数据属性
+    _flag_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>) } }),
+    remote_data_url: PropTypes.string({ label: '远端数据url', component: 'a-textarea', defaultValue: 'http://36.138.68.10:19102/General_Interface/queryWeatherByCity', layout: { prefixCls: 'bsth-line' } }),
+    remote_data_refresh_seconds: PropTypes.number({ label: '数据刷新间隔（秒）', defaultValue: 30, 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>) } }),
+    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: 0, layout: { prefixCls: 'bsth-line' } }),
+    background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    // 图内层css
+    _flat_2_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层svg css属性" class="bsth-line-item-divider"></hr>) } }),
+    svg_background: PropTypes.color({ label: '整体svg背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    city_info_font_size: PropTypes.number({ label: '城市信息字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    city_info_font_color: PropTypes.color({ label: '城市信息字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    city_info_background: PropTypes.color({ label: '城市信息背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    weather_info_font_size: PropTypes.number({ label: '天气信息字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    weather_info_font_color: PropTypes.color({ label: '天气信息字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    weather_info_background: PropTypes.color({ label: '天气信息背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    temperature_info_font_size: PropTypes.number({ label: '温度信息字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    temperature_info_font_color: PropTypes.color({ label: '温度信息字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
+    temperature_info_background: PropTypes.color({ label: '温度信息背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
+
+  },
+  render () {
+    const innerDivStyle = {
+      'width': this.component_width + 'px',
+      'height': this.component_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'
+    }
+    const svgStyle = {
+      'width': this.svg_width + 'px',
+      'height': this.svg_height + 'px',
+      'background-color': this.svg_background
+    }
+
+    /* 最外层div对应编辑器的通用样式 */
+    return (
+      <a-spin tip={this.initLoadingText} spinning={this.initLoading} size="large">
+        <div class="weather-chart-outer-div">
+          <div style={innerDivStyle}>
+            <svg class="weather-chart"
+                 style={svgStyle}>
+            </svg>
+          </div>
+        </div>
+      </a-spin>
+    )
+  },
+  beforeMount () {
+    // 设置数据
+    if (this.useMode === 'alone' && this.editorMode === 'edit') { // 单独使用，使用测试数据
+      this.weatherData = WeatherData.generateTestData1()
+    } else { // 自组件使用，使用父组件传值
+      this.weatherData = this.weatherData_child
+    }
+  },
+  mounted () {
+    // svg元素
+    this.private_svg = this.findD3SvgDom()
+
+    // 使用外部元素的框架定义图的长宽
+    let $jQuery = this.private_jQuery
+    this.component_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
+    this.component_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
+
+    if (this.useMode === 'child') {
+      this.component_width = this.line_chart_outer_div_width - this.margin_left - this.margin_right
+      this.component_height = this.line_chart_outer_div_height - this.margin_top - this.margin_bottom
+    }
+
+    // 开启外部元素长宽监控计数
+    /**
+     * 开启外部元素长宽监控逻辑（class='line-chart-outer-div'）
+     * 1、使用模式是alone，并且是编辑模式edit
+     * 2、preview预览模式下有条件监控
+     */
+    if (this.useMode === 'alone' && this.editorMode === 'edit') {
+      this.watchWidthHeightTimer.count++
+    }
+
+    // 1、初始化数据
+    // 1.1、edit模式下，使用测试数据
+    if (this.editorMode === 'edit') {
+      this.initLoading = false
+    }
+    // 1.2、preview模式下，使用远程数据
+    if (this.editorMode === 'preview') {
+      console.log('initDataByRemoteApi')
+      this.initDataByRemoteApi()
+    }
+  },
+  destroyed () {
+    // 组件删除的时候，删除监控定时器
+    let timer = this.watchWidthHeightTimer.timer
+    if (timer) {
+      clearTimeout(timer)
+      this.watchWidthHeightTimer.timer = null
+    }
+    timer = this.weatherDataTimer.timer
+    if (timer) {
+      clearTimeout(timer)
+      this.weatherDataTimer.timer = null
+    }
+  },
+  watch: {
+    //------------ 定时器监控 -----------//
+    '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.component_width) {
+          self.component_width = width - self.margin_left - self.margin_right
+        }
+        if (height !== self.component_height) {
+          self.component_height = height - self.margin_top - self.margin_bottom
+        }
+        self.watchWidthHeightTimer.count++
+      }, self.watchWidthHeightTimer.millisecond)
+    },
+    'weatherDataTimer.count' () {
+      let timer = this.weatherDataTimer.timer
+      if (timer) {
+        try {
+          clearTimeout(timer)
+        } catch (err) {}
+      }
+      let self = this
+      this.weatherDataTimer.timer = setTimeout(function () {
+        self.refreshDataByRemoteApi()
+      }, this.remote_data_refresh_seconds * 1000)
+    },
+    //-------------- 不可编辑属性监控 ---------------//
+    /**
+     * 当组件作为子组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
+     * 必须由父组件设定，自组件需要监控改变
+     */
+    weather_chart_outer_div_width: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.component_width = val - self.margin_left - self.margin_right
+      }
+    },
+    weather_chart_outer_div_height: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.component_height = val - self.margin_top - self.margin_bottom
+      }
+    },
+
+    //------------- data方法中绑定的数据监控 --------------------//
+    // ----------- 数据属性 ----------- //
+    weatherData: { // 使用deep检测所有属性变化
+      handler (currentVal, oldVal) {
+        let self = this
+        // TODO：这里objectEquals有点问题，暂时不用了
+        // if (!Utils.objectEquals(currentVal, oldVal)) {
+        //   self.refreshSvg()
+        // }
+        console.log('refreshSvg()')
+        self.refreshSvg()
+      },
+      deep: true
+    },
+
+    // ------------ 本身宽高 ----------- //
+    component_width () {
+      let self = this
+      self.svg_width = self.component_width - self.border_size * 2
+    },
+    component_height () {
+      let self = this
+      self.svg_height = self.component_height - self.border_size * 2
+    },
+
+    svg_width () {
+      let self = this
+      self.refreshSvg()
+    },
+    svg_height () {
+      let self = this
+      self.refreshSvg()
+    },
+
+    //--------------- 外部编辑器可编辑属性监控 -----------------//
+    //--------- 图外层css监控 -------//
+    margin_left () {
+      let self = this
+      self.component_width = self.component_width - self.margin_left - self.margin_right
+    },
+    margin_right () {
+      let self = this
+      self.component_width = self.component_width - self.margin_left - self.margin_right
+    },
+    margin_top () {
+      let self = this
+      self.component_height = self.component_height - self.margin_top - self.margin_bottom
+    },
+    margin_bottom () {
+      let self = this
+      self.component_height = self.component_height - self.margin_top - self.margin_bottom
+    },
+    border_size () {
+      let self = this
+      self.svg_width = self.component_width - self.border_size * 2
+      self.svg_height = self.component_height - self.border_size * 2
+    },
+
+    //---------- 图内层css监控 --------//
+    // 对应 _flat_2_1_ 属性集合
+    city_info_font_size () {
+      let self = this
+      self.refreshSvg()
+    },
+    city_info_font_color () {
+      let self = this
+      self.refreshSvg()
+    },
+    city_info_background () {
+      let self = this
+      self.refreshSvg()
+    },
+    weather_info_font_size () {
+      let self = this
+      self.refreshSvg()
+    },
+    weather_info_font_color () {
+      let self = this
+      self.refreshSvg()
+    },
+    weather_info_background () {
+      let self = this
+      self.refreshSvg()
+    },
+    temperature_info_font_size () {
+      let self = this
+      self.refreshSvg()
+    },
+    temperature_info_font_color () {
+      let self = this
+      self.refreshSvg()
+    },
+    temperature_info_background () {
+      let self = this
+      self.refreshSvg()
+    }
+
+  },
+  methods: {
+    findD3SvgDom () {
+      let $jQuery = this.private_jQuery
+      let d3 = this.private_d3
+      let svgDom = $jQuery(this.$el).find('svg')[0]
+      return d3.select(svgDom)
+    },
+
+    refreshSvg () {
+      // console.log('refreshsvg')
+
+      let self = this
+
+      let d3 = self.private_d3
+      let svg = self.private_svg
+      let width = self.svg_width
+      let height = self.svg_height
+
+      let svgData = self.weatherData == null ? [] : self.weatherData.generateSvgData()
+
+      // console.log(svgData)
+
+      // ------------ 0、前置计算准备 --------------//
+      // part上下左右，之间的间隔
+      let partUpPadding = 10
+      let partDownPadding = 10
+      let partLeftPadding = 10
+      let partRightPadding = 10
+      let partBetweenPadding = 5
+
+      // 计算三个part的宽度（宽度相同）
+      let partWidth = Math.floor((width - partLeftPadding - partRightPadding - partBetweenPadding * 2) / 3)
+      let partHeight = height - partUpPadding - partDownPadding
+
+      // 创建x轴比例尺
+      let xScale = d3.scaleLinear()
+        .domain([0, 3]) // 定义域
+        .range([partLeftPadding, width - partRightPadding]) // 值域
+      let yScale = d3.scaleLinear()
+        .domain([0, 1]) // 定义域
+        .range([partUpPadding, height - partDownPadding]) // 值域
+
+      // ------------ 1、添加g元素 ---------------- //
+      let itemsUpdate = svg.selectAll('g.part')
+        .data(svgData, function (d) {
+          return d.svgD3PartKey
+        })
+      let itemsEnter = itemsUpdate
+      let itemsExit = itemsUpdate.exit()
+
+      itemsExit.remove()
+      itemsEnter = itemsEnter.enter().append('g')
+        .classed('part', true)
+        .attr('transform', function (d, index) {
+          let x, y
+          x = xScale(0) + partWidth * index + partBetweenPadding * index
+          y = yScale(0)
+          return `translate(${x}, ${y})`
+        })
+      itemsUpdate
+        .attr('transform', function (d, index) {
+          let x, y
+          x = xScale(0) + partWidth * index + partBetweenPadding * index
+          y = yScale(0)
+          return `translate(${x}, ${y})`
+        })
+
+      // ------------ 1-1、添加 rect.main 元素 ---------------- //
+      itemsEnter.append('rect')
+        .classed('main', true)
+        .style('fill', function (d) {
+          return self[d.bgProp]
+        })
+        .style('stroke-width', function (d) {
+          return 0
+        })
+        .attr('stroke-dasharray', function (d) {
+          return null
+        })
+        .attr('width', function (d) {
+          return partWidth
+        })
+        .attr('height', partHeight + 'px')
+      itemsUpdate.select('rect.main')
+        .style('fill', function (d) {
+          return self[d.bgProp]
+        })
+        .attr('width', function (d) {
+          return partWidth
+        })
+        .attr('height', partHeight + 'px')
+
+      // ------------ 1-2、添加 g text 元素 ---------------- //
+      itemsEnter.append('g')
+        .classed('contentBound', true)
+        .attr('transform', 'translate(10, 10)')
+      itemsEnter.select('g.contentBound')
+        .append('text')
+        .classed('content', true)
+        .text(function (d) {
+          return d.text
+        })
+        .attr('title', function (d) {
+          return d.text
+        })
+        .style('font-size', function (d) {
+          return self[d.fsProp]
+        })
+        .style('fill', function (d) {
+          return self[d.fcProp]
+        })
+      itemsEnter.select('g.contentBound')
+        .attr('transform', function (d) {
+          // x方向居中对齐，y方向居中对齐
+          let rect_main_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+          let g_bounds = this.getBBox()
+          let dx = (rect_main_bounds.width - g_bounds.width) / 2 - g_bounds.x
+          let dy = (rect_main_bounds.height - g_bounds.height) / 2 - g_bounds.y
+          if (dx < 0) {
+            dx = 1
+          }
+          if (dy < 0) {
+            dy = 1
+          }
+          return `translate(${dx}, ${dy})`
+        })
+      itemsUpdate.select('text.content')
+        .text(function (d) {
+          return d.text
+        })
+        .attr('title', function (d) {
+          return d.text
+        })
+        .style('font-size', function (d) {
+          return self[d.fsProp]
+        })
+        .style('fill', function (d) {
+          return self[d.fcProp]
+        })
+      itemsUpdate.select('g.contentBound')
+        .attr('transform', function (d) {
+          // x方向居中对齐，y方向居中对齐
+          let rect_main_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+          let g_bounds = this.getBBox()
+          let dx = (rect_main_bounds.width - g_bounds.width) / 2 - g_bounds.x
+          let dy = (rect_main_bounds.height - g_bounds.height) / 2 - g_bounds.y
+          if (dx < 0) {
+            dx = 1
+          }
+          if (dy < 0) {
+            dy = 1
+          }
+          return `translate(${dx}, ${dy})`
+        })
+
+    },
+
+    initDataByRemoteApi () { // 使用后台api初始化数据
+      this.initLoading = true
+      this.initLoadingText = '初始化数据...'
+      this.weatherDataAxios.post().then(remoteData => {
+        if (!remoteData) {
+          this.initLoadingText = `远端数据为空，等待${this.remote_data_refresh_seconds}秒后重新获取，请稍后...`
+          this.count++
+        } else {
+          this.weatherData = new WeatherData()
+          this.weatherData.setFromRemoteWeatherInfo(remoteData.data)
+          this.initLoading = false
+          this.refreshSvg()
+          // 启动滚动分页，后台数据刷新
+          this.weatherDataTimer.count++
+        }
+      }).catch(err => {
+        console.log(err)
+        this.$message.error(`获取远端数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
+        this.initLoadingText = `获取远端数据失败，等待${this.remote_data_refresh_seconds}秒后重新获取，请稍后...`
+        this.weatherDataTimer.count++
+      })
+    },
+    refreshDataByRemoteApi () { // 使用后台api刷新数据
+      if (!this.weatherData) {
+        this.initDataByRemoteApi()
+      } else {
+        this.weatherDataAxios.post().then(remoteData => {
+          this.weatherData.setFromRemoteWeatherInfo(remoteData.data)
+          this.refreshSvg()
+        }).catch(err => {
+          console.log(err)
+          this.$message.error(` 获取数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
+        })
+        this.weatherDataTimer.count++
+      }
+    }
+  }
+
+}
@@ -36,6 +36,8 @@ import MhgjEBusStopLineChartList from &#39;core/plugins/bsth/mhgj/list/mhgj-eBusStop
 import OthergjEBusStopLineChart from 'core/plugins/bsth/othergj/linechart/chart/othergj-eBusStop-line-chart'
 import OthergjEBusStopLineChartList from 'core/plugins/bsth/othergj/linechart/list/othergj-eBusStop-line-chart-list'
+import WeatherChart from 'core/plugins/bsth/weather/weather-chart'
+
 export const pluginsList = [
   // {
   //   i18nTitle: {
@@ -458,6 +460,19 @@ export const pluginsList = [
   {
     i18nTitle: {
+      'en-US': 'Weather',
+      'zh-CN': '实时天气'
+    },
+    title: '实时天气',
+    icon: 'photo',
+    component: WeatherChart,
+    visible: true,
+    name: WeatherChart.name
+    // disabled: true
+  },
+
+  {
+    i18nTitle: {
       'en-US': 'Datetime',
       'zh-CN': '日期时间'
     },