花姐夫JUN的博客

开发工作中有个需要展示气温（折线）、天气（图片）、风羽（字体图标）的图表展示需求，之前用过highcharts的关于类似的chart，里面的风雨用的是自带的图片，但是现在要求风羽需要用字体图标渲染，于是我选择了比较熟悉的Echarts制作这个图表。

开发中有一个需要呈现不同时间点各个气象要素的值需求，我觉得一个table可以实现这类数据的展示，只是因为时间点时关注的重点，所以需要列选中效果，清晰的展示时间点下的要素数据。我选择的是antd的table组件，这个组件没有列选中的效果，所以还是需要自己动手丰衣足食，改造一下。这个功能的难点在于列选中效果，我们需要给他一个背景加上边框，虽然antd的table没有列选中效果，但是它提供了customCell，customHeaderCell，我们可以根据这些回调函数的特点灵活使用实现列选中效果。效果

开发工作中常常有一个通过启动时间轴切换地图图层切换的功能需求，但是又很难找到一个满足要求的时间轴，所以自己撸了一个，目前还有一些功能需要改进，这里先记录一下代码。

图片列表显示，并且能够点击图片跳出预览模式，并且能够直接切换查看。

由于开发工作需求中，很多的列表页都会有很多查询筛选条件的备选，但是其实查询筛选过程只需要选填查询筛选条件，不需要全部填，这种一大堆的条件选择及输入组件全部堆到一起。导致重要常用的几个筛选条件很难被找到，为了突出重点，结合大家的使用情况，可以将不常用的筛选条件折叠起来，需要更多筛选条件查询的时候再展开使用。这种方式的使用有个前提，就是条件收缩以后要显示的表单组件，需要连续插入，否则收起的时候组件之间会有空格，而且这个需要使用方式二中的动态插槽，根方式不同的就是收起展开时判断方式的不同。上面的参数说明里面的。

1、由于当前组件是一个布局组件，而且是左右横向布局的组件，所以选用antd组件中的。2、左右部分的内容都是有head和body部分，所以可以选用antd组件中最常用的。组件，这样组件内的间距也可以默认使用，不用在自定义样式。技术不行，还有很多可以优化的地方，希望大家留言指教。注意：上面原型图中缺少缩放按钮的设计。