2020-05-22

king

2020-05-22 5afa6791ca4f1f962273f48f61cfc61107d94561

2020-05-22

 src/tabviews/commontable/index.jsx

@@ -1420,6 +1420,7 @@
                      plot={item}
                      config={config}
                      data={this.state.data}
                      loading={this.state.loading}
                    />
                  </Col>
                )

 src/tabviews/subtable/index.jsx

@@ -23,6 +23,7 @@

const { TabPane } = Tabs
const SubAction = asyncComponent(() => import('@/tabviews/zshare/actionList'))
const CardComponent = asyncComponent(() => import('@/tabviews/zshare/cardcomponent'))
const SubTabTable = asyncLoadComponent(() => import('@/tabviews/subtabtable'))

class SubTabViewTable extends Component {
@@ -192,6 +193,7 @@

        // 视图权限
        config.charts = config.charts.filter(item => {
          if (item.Hide === 'true') return false
          if (!item.blacklist || item.blacklist.length === 0) return true

          let _black = item.blacklist.filter(v => {
@@ -204,6 +206,9 @@
            return true
          }
        })
      } else {
        // 隐藏视图
        config.charts = config.charts.filter(item => item.Hide !== 'true')
      }

      if (config.charts.length <= 1) {
@@ -991,13 +996,50 @@
                  </div>
                </Col>
              )
            } else if (item.chartType === 'card') {
              return (
                <Col span={item.width} key={item.uuid}>
                  <CardComponent
                    plot={item}
                    config={config}
                    data={this.state.data}
                    loading={this.state.loading}
                    tableId={this.props.Tab.uuid}
                    buttonTrigger={this.buttonTrigger}
                    handleTableId={this.handleTableId}
                  />
                  <div style={{display: 'none'}}>
                    <SubAction
                      type="sub"
                      menuType={this.props.menuType}
                      triggerBtn={triggerBtn}
                      setting={setting}
                      actions={actions}
                      Tab={this.props.Tab}
                      BID={this.props.BID}
                      BData={this.props.BData}
                      dict={this.state.dict}
                      MenuID={this.props.MenuID}
                      dataManager={this.props.dataManager}
                      permRoles={this.props.permRoles}
                      logcolumns={this.state.logcolumns}
                      refreshdata={this.refreshbyaction}
                      ContainerId={this.props.ContainerId}
                      triggerPopview={this.triggerPopview}
                      getexceloutparam={this.getexceloutparam}
                      gettableselected={this.gettableselected}
                    />
                  </div>
                </Col>
              )
            } else {
              return (
                <Col span={item.width} key={item.uuid}>
                  <ChartComponent
                    plot={item}
                    data={this.state.data}
                    config={config}
                    data={this.state.data}
                    loading={this.state.loading}
                  />
                </Col>
              )

 src/tabviews/subtable/index.scss

@@ -11,6 +11,15 @@
      padding: 10px 0px 5px;
    }
  }
  >.chart-view >.ant-tabs {
    position: relative;
    top: -10px;
    .ant-tabs-bar .ant-tabs-nav-scroll {
      text-align: right;
      padding-right: 0px;
    }
  }

  .normal-data-table {
    padding: 0px;
  }

 src/tabviews/subtabtable/index.jsx

@@ -21,6 +21,7 @@

const { TabPane } = Tabs
const SubAction = asyncComponent(() => import('@/tabviews/zshare/actionList'))
const CardComponent = asyncComponent(() => import('@/tabviews/zshare/cardcomponent'))

class SubTabModalTable extends Component {
  static propTpyes = {
@@ -158,6 +159,7 @@

        // 视图权限
        config.charts = config.charts.filter(item => {
          if (item.Hide === 'true') return false
          if (!item.blacklist || item.blacklist.length === 0) return true

          let _black = item.blacklist.filter(v => {
@@ -170,6 +172,9 @@
            return true
          }
        })
      } else {
        // 隐藏视图
        config.charts = config.charts.filter(item => item.Hide !== 'true')
      }

      if (config.charts.length <= 1) {
@@ -762,13 +767,47 @@
                  />
                </Col>
              )
            } else if (item.chartType === 'card') {
              return (
                <Col span={item.width} key={item.uuid}>
                  <CardComponent
                    tableId=""
                    plot={item}
                    config={config}
                    data={this.state.data}
                    loading={this.state.loading}
                    buttonTrigger={this.buttonTrigger}
                    handleTableId={() => {}}
                  />
                  <div style={{display: 'none'}}>
                    <SubAction
                      type="subtab"
                      triggerBtn={triggerBtn}
                      menuType={this.props.menuType}
                      setting={setting}
                      actions={actions}
                      BID={this.props.BID}
                      dict={this.state.dict}
                      BData={this.props.BData}
                      MenuID={this.props.SupMenuID}
                      permRoles={this.props.permRoles}
                      dataManager={this.props.dataManager}
                      logcolumns={this.state.logcolumns}
                      refreshdata={this.refreshbyaction}
                      ContainerId={this.props.ContainerId}
                      gettableselected={() => {}}
                    />
                  </div>
                </Col>
              )
            } else {
              return (
                <Col span={item.width} key={item.uuid}>
                  <ChartComponent
                    plot={item}
                    data={this.state.data}
                    config={config}
                    data={this.state.data}
                    loading={this.state.loading}
                  />
                </Col>
              )

 src/tabviews/zshare/cardcomponent/index.jsx

@@ -501,7 +501,7 @@
    const { card, colMap, selectKey } = this.state

    return (
      <div className="card-row-box mingke-table">
      <div className="card-row-box mingke-table" style={!plot.title ? {paddingTop: '15px'} : null}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
@@ -526,7 +526,6 @@
          <Tabs activeKey="">
            {data.map((item, i) => (
              <TabPane tab={<CardCell
                // key={i}
                card={card}
                data={item}
                colMap={colMap}

 src/tabviews/zshare/cardcomponent/index.scss

@@ -1,6 +1,5 @@
.card-row-box {
  min-height: 50px;
  margin-bottom: 30px;
  padding: 0px 10px;

  .chart-card-box {
@@ -9,6 +8,7 @@
      margin-right: 0px;
    }
  }

  .chart-card-box:not(.ant-col) {
    display: inline-block;
    margin-bottom: 20px;

 src/tabviews/zshare/chartcomponent/index.jsx

@@ -3,7 +3,9 @@
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import { Spin, Empty } from 'antd'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
@@ -12,11 +14,14 @@
  static propTpyes = {
    plot: PropTypes.object,
    data: PropTypes.array,
    loading: PropTypes.bool,
    config: PropTypes.object
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    empty: true,
    chartId: Utils.getuuid()
  }

  componentDidMount () {
@@ -26,7 +31,7 @@
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      this.setState({}, () => {
        let _element = document.getElementById(this.props.plot.uuid)
        let _element = document.getElementById(this.state.chartId)
        if (_element) {
          _element.innerHTML = ''
        }
@@ -35,13 +40,20 @@
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  getdata = () => {
    const { data, plot, config } = this.props
    
    let vFields = plot.Yaxis && typeof(plot.Yaxis) === 'string' ? [plot.Yaxis] : plot.Yaxis
    let _columns = config.columns.filter(col => vFields.includes(col.field))

    if (!data) return []
    if (!data) {
      this.setState({empty: true})
      return []
    }

    let _data = []
    let _cdata = fromJS(data).toJS()
@@ -139,6 +151,7 @@
      _data = [..._mdata.values()]
    }

    this.setState({empty: _data.length === 0})
    return _data
  }

@@ -191,7 +204,7 @@
    }
    
    const chart = new Chart({
      container: plot.uuid,
      container: this.state.chartId,
      autoFit: true,
      height: plot.height || 400
    })
@@ -291,10 +304,15 @@
    }
    
    const chart = new Chart({
      container: plot.uuid,
      container: this.state.chartId,
      autoFit: true,
      height: plot.height || 400
    })

    // dodge is not support linear attribute, please use category attribute! 时间格式
    if (dv.rows[0] && dv.rows[0][X_axis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(dv.rows[0][X_axis])) {
      dv.rows[0][X_axis] += ' '
    }

    chart.data(dv.rows)

@@ -384,7 +402,7 @@
    }
    
    const chart = new Chart({
      container: plot.uuid,
      container: this.state.chartId,
      autoFit: true,
      height: plot.height || 400
    })
@@ -495,12 +513,20 @@
  }

  render() {
    const { plot } = this.props
    const { plot, loading } = this.props
    const { empty } = this.state

    return (
      <div className="line-chart-plot-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
      <div className="line-chart-plot-box">
        {plot.title ? <p className="chart-title">{plot.title}</p> : null}
        <div className="canvas" id={plot.uuid}></div>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
        {empty ? <Empty description={false}/> : null}
      </div>
    )
  }

 src/tabviews/zshare/chartcomponent/index.scss

@@ -6,4 +6,47 @@
    border: 1px solid #e8e8e8;
    padding: 25px 15px;
  }
  .canvas.empty {
    div {
      opacity: 0;
    }
  }
  .ant-empty {
    position: absolute;
    top: calc(50% - 34px);
    left: calc(50% - 92px);

    .ant-empty-image {
      height: 60px;
    }
  }
  .loading-mask {
    position: absolute;
    left: 20px;
    top: 0;
    right: 20px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    z-index: 1;

    .ant-spin-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #ffffff;
    }
  }
  .chart-title + .loading-mask {
    top: 40px;
  }
}

.subtable .ant-col-24 .line-chart-plot-box {
  .canvas {
    margin: 0;
  }
}

 src/templates/sharecomponent/settingcomponent/index.jsx

@@ -38,7 +38,6 @@
   */
  changeSetting = () => {
    const { menuformRef, MenuID, config, type, permFuncField, mainsearch } = this.props
    console.log(config)
    let menu = {MenuID: MenuID}

    if (menuformRef) {

 src/templates/sharecomponent/settingcomponent/index.scss

@@ -34,5 +34,8 @@
      border: 1px solid rgba(0, 0, 0, 0.07);
      background: rgba(0, 0, 0, 0);
    }
    .ant-empty-normal {
      margin: 5px 0px;
    }
  }
}

 src/templates/sharecomponent/settingcomponent/settingform/index.jsx

@@ -884,6 +884,7 @@
    return (
      <div className="model-table-setting-form-box" id="model-table-setting-form-box">
        {view ==='custom' ? <div>
          <Icon className="setting-custom-back" onClick={this.changeView} type="arrow-left" />
          <CustomScript
            type={type}
            setting={setting}

 src/templates/sharecomponent/settingcomponent/settingform/index.scss

@@ -1,4 +1,5 @@
.model-table-setting-form-box {
  position: relative;
  .model-table-setting-form {
    .textarea {
      .ant-form-item-label {
@@ -22,4 +23,14 @@
  td {
    word-break: break-all;
  }
  .setting-custom-back {
    position: absolute;
    top: -20px;
    left: -10px;
    font-size: 16px;
    z-index: 1;
    cursor: pointer;
    padding: 10px;
    color: rgb(24, 144, 255);
  }
}