报表选择图表过滤

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -181,13 +181,13 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch, formItemLayout })
 					})}
 				</Select>
 			</FormItem>
-			<FormItem label='阈值' {...formItemLayout}>
+			{/* <FormItem label='阈值' {...formItemLayout}>
 				<InputNumber min={0} defaultValue={chartDesigner.barConfig.threshold} onBlur={(e) => {
 					if(chartDesigner.barConfig.threshold !== e.target.value) {
 						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...chartDesigner.barConfig, threshold: e.target.value }, autoRefresh });
 					}
 				}}/>
-			</FormItem>
+			</FormItem> */}
 		</Form>
 	);
 }

src/components/chartDesigner/sections/lineConfigForm.jsx

@@ -180,13 +180,13 @@ const LineConfigForm = ({ autoRefresh, chartDesigner, dispatch, formItemLayout }
 					})}
 				</Select>
 			</FormItem>
-			<FormItem label='阈值' {...formItemLayout}>
+			{/* <FormItem label='阈值' {...formItemLayout}>
 				<InputNumber min={0} defaultValue={chartDesigner.lineConfig.threshold} onBlur={(e) => {
 					if(chartDesigner.lineConfig.threshold !== e.target.value) {
 						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, threshold: e.target.value }, autoRefresh });
 					}
 				}}/>
-			</FormItem>
+			</FormItem> */}
 		</Form>
 	);
 }

src/components/chartDesigner/sections/pieConfigForm.jsx

@@ -162,13 +162,13 @@ const PieConfigForm = ({ autoRefresh, chartDesigner, dispatch, formItemLayout })
 				>
 				</Cascader>
 			</FormItem>
-			<FormItem label='阈值' {...formItemLayout}>
+			{/* <FormItem label='阈值' {...formItemLayout}>
 				<InputNumber min={0} defaultValue={chartDesigner.pieConfig.threshold} onBlur={(e) => {
 					if(chartDesigner.pieConfig.threshold !== e.target.value) {
 						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...chartDesigner.pieConfig, threshold: e.target.value }, autoRefresh });
 					}
 				}}/>
-			</FormItem>
+			</FormItem> */}
 		</Form>
 	);
 }

src/components/chartDesigner/sections/scatterConfigForm.jsx

@@ -181,13 +181,13 @@ const ScatterConfigForm = ({ autoRefresh, chartDesigner, dispatch, formItemLayou
 					})}
 				</Select>
 			</FormItem>
-			<FormItem label='阈值' {...formItemLayout}>
+			{/* <FormItem label='阈值' {...formItemLayout}>
 				<InputNumber min={0} defaultValue={chartDesigner.scatterConfig.threshold} onBlur={(e) => {
 					if(chartDesigner.scatterConfig.threshold !== e.target.value) {
 						dispatch({ type: 'chartDesigner/changeField', name: 'scatterConfig', value: { ...chartDesigner.scatterConfig, threshold: e.target.value }, autoRefresh });
 					}
 				}}/>
-			</FormItem>
+			</FormItem> */}
 		</Form>
 	);
 }

src/components/dashboardDesigner/chooseChartBox.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import '../../models/dashboardDesigner'
-import { Modal, Radio, Row, Col, Table, Input, message } from 'antd'
+import { Modal, Radio, Row, Col, Table, Input, Select, message, DatePicker } from 'antd'
 import { connect } from 'dva'
 import moment from 'moment'
 import 'braft-editor/dist/braft.css'
 import './chooseChartBox.less'
 const { Search } = Input
+const { RangePicker } = DatePicker
 
 class ChooseChartBox extends React.Component {
 
@@ -53,12 +54,18 @@ class ChooseChartBox extends React.Component {
         }
     }
 
+    generateFilterItems = () => {
+        const { filterItems } = this.props.chart;
+        return filterItems.map(t => <Select.Option key={t.name}  value={t.name}>{t.label}</Select.Option>);
+    }
+
     render() {
-        const { main, visibleBox, hideBox, dashboardDesigner, chart } = this.props;
+        const { main, visibleBox, hideBox, dashboardDesigner, chart, dispatch } = this.props;
         const { selectedRecord, screenWidth, screenHeight } = this.state;
         const tableBodyWidth = screenWidth * 0.8 - 10 - 10 - 18;
         const tableBodyHeight = screenHeight * 0.8 - 65 - 53 - 38 - 130;
         const tableRowHeight = 38;
+        const { filterItem } = dashboardDesigner;
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = this.state.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         const columns = [{
@@ -81,7 +88,7 @@ class ChooseChartBox extends React.Component {
                 return <div>
                     <div>
                         <span>
-                            { filterLabel ?
+                            { filterLabel && filterItem.name === 'name' ?
                                 (text.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                     return (
                                         fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
@@ -99,7 +106,25 @@ class ChooseChartBox extends React.Component {
             title: '创建人',
             dataIndex: 'creatorName',
             key: 'creatorName',
-            width: 100
+            width: 100,
+            render: (text, record) => {
+                return <div>
+                    <div>
+                        <span>
+                            { filterLabel && filterItem.name === 'creatorName' ?
+                                (text.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                    return (
+                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                        fragment
+                                    )
+                                }
+                                )) : text
+                            }
+                        </span>
+                    </div>
+                </div>
+            }
         }, {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -114,7 +139,7 @@ class ChooseChartBox extends React.Component {
             render: (text, record) => {
                 return (
                     <span>
-                        { filterLabel ?
+                        { filterLabel && filterItem.name === 'description' ?
                             ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                 return (
                                     fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
@@ -135,16 +160,66 @@ class ChooseChartBox extends React.Component {
                 height='80%'
                 title={
                     <Row>
-                        <Col span={14}>选择图表</Col>
-                        <Col span={8}><Search 
-                            placeholder="请输入关键字"
-                            value={this.state.filterLabel}
-                            onChange={e => {
-                                this.setState({
-                                    filterLabel: e.target.value
-                                });
-                            }}
-                        /></Col>
+                        <Row>
+                            <Col >选择图表</Col>
+                        </Row>
+                        <Row type='flex' justify='end'>
+                            <Col style={{ padding: '0 1px', margin: '0 -5px' }}>
+                                <Select 
+                                    value={filterItem.name}
+                                    style={{ width: 120 }}
+                                    onChange={value => {
+                                        let item = chart.filterItems.find(i => i.name === value);
+                                        dispatch({ type: 'dashboardDesigner/setFilterItem', item });
+                                    }}
+                                >
+                                    {this.generateFilterItems()}
+                                </Select>
+                            </Col>
+                            <Col style={{ padding: '0 5px' }}>
+                                {filterItem.type === 'date' ? 
+                                    <RangePicker  
+                                        ranges={{
+                                            '今天': [moment().startOf('day'), moment().endOf('day')], 
+                                            '昨天': [moment().startOf('day').add(-1,'days'), moment().endOf('day')],
+                                            '近七天': [moment().startOf('day'),moment().endOf('day').add(6,'days')],
+                                            '本月': [moment().startOf('month'), moment().endOf('month')],
+                                            '本年': [moment().startOf('year'), moment().endOf('year')] 
+                                        }}
+                                        showTime={{ format: 'HH:mm' }}
+                                        format="YYYY-MM-DD HH:mm:ss"
+                                        onChange={e => {
+                                            //清空时间时
+                                            if(e.length === 0){
+                                                this.setState({
+                                                    filterLabel: ''
+                                                });
+                                            }
+                                        }}
+                                        onOk={e => {
+                                            //解析时间格式
+                                            let start = e[0]
+                                            let end = e[1]
+                                            let time = start._d.getTime() + "#" + end._d.getTime()
+                                            this.setState({
+                                                filterLabel: time
+                                            });
+                                        }}
+                                    >
+                                    </RangePicker> 
+                                    : 
+                                    <Search
+                                        placeholder="请输入关键字"
+                                        value={this.state.filterLabel}
+                                        onChange={e => {
+                                            this.setState({
+                                                filterLabel: e.target.value
+                                            });
+                                        }}
+                                    />
+                                }
+                            </Col>
+                        </Row>
                     </Row>
                 }
                 visible={visibleBox}
@@ -159,10 +234,28 @@ class ChooseChartBox extends React.Component {
                         ...c,
                         width: 100
                     }))}
-                    dataSource={chart.list.filter(l => l.creatorCode === main.currentUser.code).map((l, i) => ({ ...l, key: i})).filter(l => {
-                        let regLabel = new RegExp('(' + filterLabel + '){1}', 'ig');
-                        return (l.name || '').search(regLabel) !== -1 || (l.description || '').search(regLabel) !== -1;
-                    })}
+                    dataSource={chart.list.filter(l => l.creatorCode === main.currentUser.code).map((l, i) => {
+                        let o = Object.assign({}, l);
+                        if(filterItem.type === 'date') {
+                            if(filterLabel===""){
+                                console.log(filterLabel);
+                                return { ...o, key: i };
+                            }else if(filterLabel.indexOf('#')>-1){
+                                let start = filterLabel.split('#')[0]
+                                let end = filterLabel.split('#')[1]
+                                let nowTime = new Date(o[filterItem.name]).getTime();
+                                console.log(start, end, nowTime);
+                                if(nowTime>=start && nowTime<=end){
+                                    return { ...o, key: i};
+                                }
+                                return null 
+                            }else{
+                                return null 
+                            }
+                        }else {
+                            return ((o[filterItem.name] + '').search(filterLabel) > -1) ? { ...o, key: i } : null
+                        }
+                    }).filter(a => a!==null)}
                     size='small'
                     scroll={{ x: columns ? columns.length * 100 : tableBodyWidth, y: tableBodyHeight }}
                     pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -163,6 +163,7 @@ class DataConnectBox extends React.Component {
                             >
                                 <InputNumber
                                     disabled={disabled}
+                                    defaultValue={1521}
                                     value={dataConnect.newOne.port}
                                     onChange={(value) => {
                                         dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: value });
@@ -177,6 +178,7 @@ class DataConnectBox extends React.Component {
                     >
                         <Input
                             disabled={disabled}
+                            defaultValue='orcl'
                             value={dataConnect.newOne.dbName}
                             onChange={(e) => {
                                 dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: e.target.value });

src/models/dashboardDesigner.js

@@ -92,7 +92,14 @@ export default {
             columnFetching: false,
             loading: false,
             shareCode: '', // 分享码
-            demo: false
+            demo: false,
+            filterItems: [ // 可选过滤字段（选择图表时用）
+                { name: 'name', label: '图表名称', type: 'string' },
+                { name: 'description', label: '说明', type: 'string' },
+                { name: 'creatorName', label: '创建人', type: 'string' },
+                { name: 'createTime', label: '创建时间', type: 'date' },
+            ],
+            filterItem: { name: 'name', label: '图表名称', type: 'string' }, // 已选过滤字段（选择图表时用）
         },
     },
     
@@ -125,6 +132,14 @@ export default {
             let newState = Object.assign({}, state, obj);
             return Object.assign({}, newState, {dirty: true});
         },
+        setFilterItem(state, action) {
+            const { item } = action;
+            return Object.assign({}, state, {filterItem: item, filterLabel: ''});
+        },
+        setFilterLabel(state, action) {
+            const { label } = action;
+            return Object.assign({}, state, {filterLabel: label});
+        },
         addChart(state, action) {
             let { items, dataSources, chartCodes, defaultLayout } = state;
             const { chart } = action;