2024-01-04

king

2024-01-04 1d395e6d750fe91082c99a15e355ab2841ed65c6

2024-01-04

 src/components/mkPicture/index.jsx

@@ -9,6 +9,7 @@
class MkPicture extends Component {
  static propTpyes = {
    style: PropTypes.object,
    lostTip: PropTypes.bool,
    scale: PropTypes.bool,
    url: PropTypes.string,
    urls: PropTypes.array,
@@ -20,24 +21,26 @@
  }

  UNSAFE_componentWillMount() {
    const { url } = this.props
    const { url, lostTip } = this.props

    if (url) {
      this.setState({url: url, lost: false})
      this.checkUrl(url)
    } else {
      this.setState({url: LostPng, lost: true})
      this.setState({url: lostTip ? LostPng: '', lost: true})
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { lostTip } = this.props

    if (nextProps.url) {
      if (nextProps.url !== this.state.url) {
        this.setState({url: nextProps.url, lost: false})
        this.checkUrl(nextProps.url)
      }
    } else {
      this.setState({url: LostPng, lost: true})
      this.setState({url: lostTip ? LostPng: '', lost: true})
    }
  }

@@ -63,9 +66,15 @@
  }

  render() {
    const { style, scale, urls } = this.props
    const { style, scale, urls, lostTip } = this.props
    const { url, lost } = this.state

    if (!lostTip && !url) {
      return (
        <div className="ant-mk-picture empty" style={style}></div>
      )
    }

    return (
      <div
        className={'ant-mk-picture' + (scale ? ' scale' : '') + (lost ? ' lost' : '')}

 src/components/mkPicture/index.scss

@@ -6,6 +6,9 @@
.ant-mk-picture.lost {
  background-size: contain!important;
}
.ant-mk-picture.empty {
  background: transparent!important;
}
.ant-mk-picture.scale {
  cursor: zoom-in;
}

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -159,7 +159,12 @@
        if (this.record.eleType === 'number') {
          _options.push('decimal', 'format')
        }
      } else if (this.record.eleType === 'picture' || this.record.eleType === 'video') {
      } else if (this.record.eleType === 'picture') {
        _options.push('url')
        if (this.record.noValue === 'show') {
          _options.push('lostTip')
        }
      } else if (this.record.eleType === 'video') {
        _options.push('url')
      } else {
        _options.push('value')
@@ -341,7 +346,7 @@
          return item
        })
      })
    } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType'].includes(key)) {
    } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType', 'noValue'].includes(key)) {
      let _options = this.getOptions()

      this.setState({

 src/menu/components/card/cardcellcomponent/formconfig.jsx

@@ -675,6 +675,18 @@
    },
    {
      type: 'radio',
      key: 'lostTip',
      label: '图片缺失',
      initVal: card.lostTip || 'true',
      tooltip: '图片地址不存在时，是否提示图片丢失。',
      required: false,
      options: [
        { value: 'true', text: '提示' },
        { value: 'false', text: '不提示' }
      ]
    },
    {
      type: 'radio',
      key: 'alignItems',
      label: '垂直对齐',
      initVal: card.alignItems || '',

 src/menu/components/card/cardcellcomponent/index.jsx

@@ -245,6 +245,10 @@
    } else if (_card.eleType === 'picture') {
      _card.style = style
      delete _card.style.backgroundImage
      delete _card.style.paddingTop
      delete _card.style.paddingBottom
      delete _card.style.paddingLeft
      delete _card.style.paddingRight
    } else {
      _card.style = style
    }
@@ -415,6 +419,10 @@
            res.innerHeight = res.barHeight + (res.displayValue === 'true' ? fontSize + 2 : 0)
          } else if (res.eleType === 'picture') {
            delete res.style.backgroundImage
            delete res.style.paddingTop
            delete res.style.paddingBottom
            delete res.style.paddingLeft
            delete res.style.paddingRight
          }
          
          return res

 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx

@@ -407,27 +407,11 @@
        value: 'false',
        label: '隐藏'
      }]
    // }, {
    //   type: 'radio',
    //   field: 'transpose',
    //   label: '变换',
    //   initval: card.transpose || 'false',
    //   tooltip: '横纵坐标轴交换',
    //   forbid: card.chartType === 'line',
    //   required: false,
    //   options: [{
    //     value: 'true',
    //     label: '是'
    //   }, {
    //     value: 'false',
    //     label: '否'
    //   }]
    }, {
      type: 'radio',
      field: 'show',
      label: '显示',
      initval: card.show || 'value',
      // tooltip: '当使用自定义设置时，可在显示（值/%）处单独设置显示类型。注：自定义为空时使用此处设置。',
      required: false,
      options: [{
        value: 'value',
@@ -450,34 +434,6 @@
      controlFields: [
        {field: 'labelColor', values: ['true']}
      ]
    // }, {
    //   type: 'radio',
    //   field: 'labelColor',
    //   label: '标注颜色',
    //   initval: card.labelColor || 'system',
    //   tooltip: '使用系统色时，使用色系选项设置的系统颜色，使用自定义为颜色设置中定义的图形颜色。',
    //   required: false,
    //   options: [{
    //     value: 'system',
    //     label: '系统'
    //   }, {
    //     value: 'custom',
    //     label: '自定义'
    //   }]
    // }, {
    //   type: 'radio',
    //   field: 'labelValue',
    //   label: '标注值',
    //   initval: card.labelValue || 'default',
    //   tooltip: '标注值的显示规则。',
    //   required: false,
    //   options: [{
    //     value: 'default',
    //     label: '默认'
    //   }, {
    //     value: 'zero',
    //     label: '隐藏 0 值'
    //   }],
    }, {
      type: 'radio',
      field: 'adjust',
@@ -533,20 +489,6 @@
        value: 'false',
        label: '不显示'
      }]
    // }, {
    //   type: 'radio',
    //   field: 'coordinate',
    //   label: '坐标',
    //   initval: card.coordinate || 'angle',
    //   required: false,
    //   forbid: card.chartType === 'line',
    //   options: [{
    //     value: 'angle',
    //     label: '二维坐标'
    //   }, {
    //     value: 'polar',
    //     label: '极坐标'
    //   }]
    }, {
      type: 'checkbox',
      field: 'axis',
@@ -585,47 +527,6 @@
      controlFields: [
        {field: 'color', notNull: true},
      ]
    // }, {
    //   type: 'radio',
    //   field: 'grid',
    //   label: '网格线',
    //   initval: card.grid || 'show',
    //   required: false,
    //   options: [{
    //     value: 'show',
    //     label: '显示'
    //   }, {
    //     value: 'hidden',
    //     label: '隐藏'
    //   }]
    // }, {
    //   type: 'radio',
    //   field: 'y_line',
    //   label: 'y轴边线',
    //   initval: card.y_line || 'hidden',
    //   tooltip: '图形左侧或右侧的边线。',
    //   required: false,
    //   options: [{
    //     value: 'show',
    //     label: '显示'
    //   }, {
    //     value: 'hidden',
    //     label: '隐藏'
    //   }]
    // }, {
    //   type: 'radio',
    //   field: 'download',
    //   label: '导出图片',
    //   initval: card.download || 'forbid',
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [{
    //     value: 'forbid',
    //     label: '禁用'
    //   }, {
    //     value: 'enable',
    //     label: '启用'
    //   }]
    }, {
      type: 'radio',
      field: 'empty',

 src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx

@@ -20,24 +20,24 @@
  return [
    {
      type: 'text',
      key: 'title',
      field: 'title',
      label: '标题',
      initVal: card.title,
      initval: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      field: 'name',
      label: '组件名称',
      initVal: card.name,
      initval: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      key: 'width',
      field: 'width',
      label: '宽度',
      initVal: card.width,
      initval: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
@@ -46,43 +46,42 @@
    },
    {
      type: 'styleInput',
      key: 'height',
      field: 'height',
      label: '图表高度',
      initVal: card.height,
      initval: card.height,
      tooltip: '图表绘图区域的高度，不包括标题及内外边距。',
      required: true,
      options: ['px', 'vh', 'vw']
    },
    {
      type: 'radio',
      key: 'permission',
      field: 'permission',
      label: '权限验证',
      initVal: card.permission || 'false',
      initval: card.permission || 'false',
      required: false,
      options: [
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType || ispop || isprint
    },
    {
      type: 'radio',
      key: 'cacheLocal',
      field: 'cacheLocal',
      label: '本地缓存',
      initVal: card.cacheLocal || 'true',
      initval: card.cacheLocal || 'true',
      required: false,
      options: [
        {value: 'true', text: '继承菜单'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '继承菜单'},
        {value: 'false', label: '禁用'},
      ],
      forbid: ispop || isprint
    },
    {
      type: 'select',
      key: 'blacklist',
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      initval: card.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType || isprint
@@ -101,24 +100,24 @@
  return [
    {
      type: 'text',
      key: 'label',
      field: 'label',
      label: '指标名称',
      initVal: card.label || '',
      initval: card.label || '',
      required: false
    },
    {
      type: 'select',
      key: 'valueField',
      field: 'valueField',
      label: '显示值',
      initVal: card.valueField || '',
      initval: card.valueField || '',
      required: true,
      options: yfields
    },
    {
      type: 'number',
      key: 'maxValue',
      field: 'maxValue',
      label: '最大值',
      initVal: card.maxValue || 100,
      initval: card.maxValue || 100,
      tooltip: '仪表盘最大刻度值',
      min: 0,
      max: 999999,
@@ -127,9 +126,9 @@
    },
    {
      type: 'number',
      key: 'tickInterval',
      field: 'tickInterval',
      label: '间隔',
      initVal: card.tickInterval || 10,
      initval: card.tickInterval || 10,
      tooltip: '仪表盘刻度间隔值。',
      min: 0,
      max: 999999,
@@ -138,56 +137,58 @@
    },
    {
      type: 'radio',
      key: 'percent',
      field: 'percent',
      label: '百分率',
      initVal: card.percent || 'true',
      initval: card.percent || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '使用'
        label: '使用'
      }, {
        value: 'false',
        text: '不使用'
        label: '不使用'
      }]
    // }, {
    //   type: 'radio',
    //   key: 'download',
    //   field: 'download',
    //   label: '导出图片',
    //   initVal: card.download || 'forbid',
    //   initval: card.download || 'forbid',
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [{
    //     value: 'forbid',
    //     text: '禁用'
    //     label: '禁用'
    //   }, {
    //     value: 'enable',
    //     text: '启用'
    //     label: '启用'
    //   }]
    },
    // {
    //   type: 'radio',
    //   key: 'empty',
    //   field: 'empty',
    //   label: '空值隐藏',
    //   initVal: card.empty || 'show',
    //   initval: card.empty || 'show',
    //   tooltip: '当查询数据为空时，隐藏该组件。',
    //   required: false,
    //   options: [
    //     {value: 'show', text: '否'},
    //     {value: 'hidden', text: '是'},
    //     {value: 'show', label: '否'},
    //     {value: 'hidden', label: '是'},
    //   ],
    // },
    {
      type: 'color',
      key: 'tickColor',
      field: 'tickColor',
      label: '刻度线',
      initVal: card.tickColor || '#CBCBCB',
      initval: card.tickColor || '',
      allowClear: true,
      required: false
    },
    {
      type: 'color',
      key: 'labelColor',
      field: 'labelColor',
      label: '指标颜色',
      initVal: card.labelColor || '#545454',
      initval: card.labelColor || '',
      allowClear: true,
      required: false
    }
  ]
@@ -206,25 +207,25 @@
  return [
    {
      type: 'select',
      key: 'labelField',
      field: 'labelField',
      label: '指标',
      initVal: card.labelField || '',
      initval: card.labelField || '',
      required: true,
      options: xfields
    },
    {
      type: 'select',
      key: 'valueField',
      field: 'valueField',
      label: '值',
      initVal: card.valueField || '',
      initval: card.valueField || '',
      required: true,
      options: yfields
    },
    {
      type: 'number',
      key: 'maxValue',
      field: 'maxValue',
      label: '最大值',
      initVal: card.maxValue || 100,
      initval: card.maxValue || 100,
      min: 0,
      max: 999999,
      decimal: 1,
@@ -232,9 +233,9 @@
    },
    {
      type: 'number',
      key: 'radius',
      field: 'radius',
      label: '外环',
      initVal: card.radius || 75,
      initval: card.radius || 75,
      tooltip: '图形所占区域的百分率。',
      min: 30,
      max: 100,
@@ -243,9 +244,9 @@
    },
    {
      type: 'number',
      key: 'fontSize',
      field: 'fontSize',
      label: '字体大小',
      initVal: card.fontSize || 28,
      initval: card.fontSize || 28,
      min: 12,
      max: 300,
      decimal: 0,
@@ -253,44 +254,46 @@
    },
    {
      type: 'radio',
      key: 'percent',
      field: 'percent',
      label: '百分率',
      initVal: card.percent || 'true',
      initval: card.percent || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '使用'
        label: '使用'
      }, {
        value: 'false',
        text: '不使用'
        label: '不使用'
      }]
    // }, {
    //   type: 'radio',
    //   key: 'download',
    //   field: 'download',
    //   label: '导出图片',
    //   initVal: card.download || 'forbid',
    //   initval: card.download || 'forbid',
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [{
    //     value: 'forbid',
    //     text: '禁用'
    //     label: '禁用'
    //   }, {
    //     value: 'enable',
    //     text: '启用'
    //     label: '启用'
    //   }]
    },
    {
      type: 'color',
      key: 'backColor',
      field: 'backColor',
      label: '背景色',
      initVal: card.backColor || '#ebedf0',
      initval: card.backColor || '',
      allowClear: true,
      required: false
    },
    {
      type: 'color',
      key: 'labelColor',
      field: 'labelColor',
      label: '字体颜色',
      initVal: card.labelColor || '#8c8c8c',
      initval: card.labelColor || '',
      allowClear: true,
      required: false
    }
  ]

 src/menu/components/chart/antv-dashboard/chartcompile/index.jsx

@@ -1,19 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, notification, Tabs, Button } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
import { Modal, Form, notification, Tabs, Button } from 'antd'
import { EditOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import { getBaseForm, getOptionForm, getRadioOptionForm } from './formconfig'
import asyncComponent from '@/utils/asyncComponent'
import ColorSketch from '@/mob/colorsketch'
import './index.scss'

const { TabPane } = Tabs

const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform'))
const ModalForm = asyncComponent(() => import('@/components/normalform/modalform'))

class LineChartDrawerForm extends Component {
  static propTpyes = {
@@ -61,156 +60,20 @@
    })
  }

  getFields() {
    const { formlist } = this.state
    const { getFieldDecorator } = this.props.form
    const fields = []

    if (!formlist) {
      return fields
    }

    formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return
      
      if (item.type === 'text') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Select mode={item.multi ? 'multiple' : ''}>
                  {item.options.map((option, index) =>
                    <Select.Option key={index} value={option.field}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Radio.Group disabled={item.readonly}>
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={12} key={index} className="color-col">
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(
                <ColorSketch />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  onSubmit = () => {
    const { config } = this.props
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _plot = {...plot, ...values}
          
          this.setState({
            plot: _plot,
            visible: false
          })
  
          this.props.plotchange({...config, plot: _plot})
        }
      this.normalRef.handleConfirm().then(values => {
        let _plot = {...plot, ...values}
        
        this.setState({
          plot: _plot,
          visible: false
        })

        this.props.plotchange({...config, plot: _plot})
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -236,15 +99,13 @@
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _plot = {...plot, ...values}
      this.normalRef.handleConfirm().then(values => {
        let _plot = {...plot, ...values}

          this.setState({
            plot: _plot,
            view: tab
          })
        }
        this.setState({
          plot: _plot,
          view: tab
        })
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -295,20 +156,10 @@

  render() {
    const { config } = this.props
    const { visible, plot, colorColumns, view, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    const { visible, plot, colorColumns, view, baseFormlist, formlist } = this.state

    return (
      <div className="line-chart-drawer-form">
      <div className="dashboard-chart-drawer-form">
        <EditOutlined title="编辑" onClick={this.showDrawer} />
        <Modal
          wrapClassName="mk-pop-modal"
@@ -322,12 +173,10 @@
          {config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null}
          <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}>
            <TabPane tab="组件设置" key="base">
              <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
              <ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
            </TabPane>
            <TabPane tab="图表设置" key="normal">
              <Form {...formItemLayout}>
                <Row gutter={16}>{this.getFields()}</Row>
              </Form>
              <ModalForm formlist={formlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.normalRef = inst}/>
            </TabPane>
            {plot ? <TabPane tab="颜色设置" key="color">
              <div>

 src/menu/components/chart/antv-dashboard/chartcompile/index.scss

@@ -1,15 +1,10 @@
.line-chart-drawer-form {
.dashboard-chart-drawer-form {
  display: inline-block;
  > .anticon-edit {
    color: #1890ff;
  }
}
.menu-chart-edit-box {
  .color-sketch-block {
    position: relative;
    top: 5px;
    width: 240px;
  }
  .color-add {
    float: right;
    margin-bottom: 10px;

 src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx

@@ -20,24 +20,24 @@
  return [
    {
      type: 'text',
      key: 'title',
      field: 'title',
      label: '标题',
      initVal: card.title,
      initval: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      field: 'name',
      label: '组件名称',
      initVal: card.name,
      initval: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      key: 'width',
      field: 'width',
      label: '宽度',
      initVal: card.width,
      initval: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
@@ -46,43 +46,42 @@
    },
    {
      type: 'styleInput',
      key: 'height',
      field: 'height',
      label: '图表高度',
      initVal: card.height,
      initval: card.height,
      tooltip: '图表绘图区域的高度，不包括标题及内外边距。',
      required: true,
      options: ['px', 'vh', 'vw']
    },
    {
      type: 'radio',
      key: 'permission',
      field: 'permission',
      label: '权限验证',
      initVal: card.permission || 'false',
      initval: card.permission || 'false',
      required: false,
      options: [
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType || ispop || isprint
    },
    {
      type: 'radio',
      key: 'cacheLocal',
      field: 'cacheLocal',
      label: '本地缓存',
      initVal: card.cacheLocal || 'true',
      initval: card.cacheLocal || 'true',
      required: false,
      options: [
        {value: 'true', text: '继承菜单'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '继承菜单'},
        {value: 'false', label: '禁用'},
      ],
      forbid: ispop || isprint
    },
    {
      type: 'select',
      key: 'blacklist',
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      initval: card.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType || isprint
@@ -103,126 +102,90 @@
  return [
    {
      type: 'select',
      key: 'gender',
      field: 'gender',
      label: '类型',
      initVal: card.gender || '',
      initval: card.gender || '',
      required: true,
      options: xfields
    },
    {
      type: 'select',
      key: 'Xaxis',
      field: 'Xaxis',
      label: 'X-轴',
      initVal: card.Xaxis || '',
      initval: card.Xaxis || '',
      required: true,
      options: columns
    },
    {
      type: 'select',
      key: 'Yaxis',
      field: 'Yaxis',
      label: 'Y-轴',
      initVal: card.Yaxis || '',
      initval: card.Yaxis || '',
      required: true,
      options: yfields
    },
    {
      type: 'radio',
      key: 'shape',
      field: 'shape',
      label: '形状',
      initVal: card.shape || 'circle',
      initval: card.shape || 'circle',
      required: false,
      options: [{
        value: 'circle',
        text: 'circle'
        label: '圆形'
      }, {
        value: 'square',
        text: 'square'
        label: '方形'
      }]
    },
    {
      type: 'radio',
      key: 'tooltip',
      field: 'tooltip',
      label: '悬浮提示',
      initVal: card.tooltip || 'true',
      initval: card.tooltip || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '显示'
        label: '显示'
      }, {
        value: 'false',
        text: '隐藏'
        label: '隐藏'
      }]
    // }, {
    //   type: 'radio',
    //   key: 'download',
    //   label: '导出图片',
    //   initVal: card.download || 'forbid',
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [{
    //     value: 'forbid',
    //     text: '禁用'
    //   }, {
    //     value: 'enable',
    //     text: '启用'
    //   }]
    },
    {
      type: 'radio',
      key: 'empty',
      field: 'empty',
      label: '空值隐藏',
      initVal: card.empty || 'show',
      initval: card.empty || 'show',
      tooltip: '当查询数据为空时，隐藏该组件。',
      required: false,
      options: [
        {value: 'show', text: '否'},
        {value: 'hidden', text: '是'},
        {value: 'show', label: '否'},
        {value: 'hidden', label: '是'},
      ],
    },
    {
      type: 'text',
      key: 'Xunit',
      field: 'Xunit',
      label: 'X轴单位',
      initVal: card.Xunit || '',
      initval: card.Xunit || '',
      required: false
    },
    {
      type: 'text',
      key: 'Yunit',
      field: 'Yunit',
      label: 'Y轴单位',
      initVal: card.Yunit || '',
      initval: card.Yunit || '',
      required: false
    },
    {
      type: 'color',
      key: 'color',
      label: '色系',
      initVal: card.color || 'rgba(0, 0, 0, 0.65)',
      tooltip: '坐标轴提示文字及示例的颜色。',
      field: 'lineColor',
      label: '坐标轴颜色',
      initval: card.lineColor || '',
      tooltip: '坐标轴线的颜色。',
      allowClear: true,
      required: false
    }
    // , {
    //   type: 'select',
    //   key: 'interaction',
    //   label: '交互效果',
    //   initVal: card.interaction || [],
    //   multi: true,
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [
    //     { value: 'element-active', label: '元素聚焦' },
    //     { value: 'element-selected', label: '元素选中（多选）' },
    //     { value: 'element-single-selected', label: '元素选中（单选）' },
    //     // { value: 'active-region', label: '背景框' },
    //     { value: 'view-zoom', label: '视图缩放' },
    //     { value: 'element-highlight', label: '元素高亮' },
    //     { value: 'element-highlight-by-color', label: '同色元素高亮' },
    //     { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
    //     { value: 'legend-filter', label: '图例过滤' },
    //     { value: 'legend-active', label: '图例聚焦' },
    //     { value: 'legend-highlight', label: '图例高亮' },
    //     { value: 'brush', label: '选框过滤' },
    //   ]
    // }
  ]
}

 src/menu/components/chart/antv-scatter/chartcompile/index.jsx

@@ -1,16 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
import { Modal, Form, Tabs } from 'antd'
import { EditOutlined } from '@ant-design/icons'

import { getBaseForm, getOptionForm } from './formconfig'
import asyncComponent from '@/utils/asyncComponent'
import ColorSketch from '@/mob/colorsketch'
import './index.scss'

const { TabPane } = Tabs
const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform'))
const ModalForm = asyncComponent(() => import('@/components/normalform/modalform'))

class LineChartDrawerForm extends Component {
  static propTpyes = {
@@ -39,156 +38,20 @@
    })
  }

  getFields() {
    const { formlist } = this.state
    const { getFieldDecorator } = this.props.form
    const fields = []

    if (!formlist) {
      return fields
    }

    formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return
      
      if (item.type === 'text') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Select mode={item.multi ? 'multiple' : ''}>
                  {item.options.map((option, index) =>
                    <Select.Option key={index} value={option.field || option.value}>
                      {option.label || option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Radio.Group disabled={item.readonly}>
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(
                <ColorSketch />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  onSubmit = () => {
    const { config } = this.props
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _plot = {...plot, ...values}
      this.normalRef.handleConfirm().then(values => {
        let _plot = {...plot, ...values}

          this.setState({
            plot: _plot,
            visible: false
          })
        this.setState({
          plot: _plot,
          visible: false
        })

          this.props.plotchange({...config, plot: _plot})
        }
        this.props.plotchange({...config, plot: _plot})
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -208,13 +71,11 @@
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.setState({
            plot: {...plot, ...values},
            view: tab
          })
        }
      this.normalRef.handleConfirm().then(values => {
        this.setState({
          plot: {...plot, ...values},
          view: tab
        })
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -228,17 +89,7 @@

  render() {
    const { config } = this.props
    const { view, visible, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    const { view, visible, baseFormlist, formlist } = this.state

    return (
      <div className="line-chart-drawer-form">
@@ -255,12 +106,10 @@
          {config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null}
          <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}>
            <TabPane tab="组件设置" key="base">
              <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
              <ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
            </TabPane>
            <TabPane tab="图表设置" key="normal">
              <Form {...formItemLayout}>
                <Row gutter={16}>{this.getFields()}</Row>
              </Form>
              <ModalForm formlist={formlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.normalRef = inst}/>
            </TabPane>
          </Tabs>
        </Modal>

 src/menu/components/chart/antv-scatter/chartcompile/index.scss

@@ -5,11 +5,6 @@
  }
}
.menu-chart-edit-box {
  .color-sketch-block {
    position: relative;
    top: 5px;
    width: 240px;
  }
  .color-add {
    float: right;
    margin-bottom: 10px;

 src/menu/components/chart/chart-custom/chartcompile/formconfig.jsx

@@ -20,35 +20,35 @@
  return [
    {
      type: 'text',
      key: 'title',
      field: 'title',
      label: '标题',
      initVal: card.title,
      initval: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      field: 'name',
      label: '组件名称',
      initVal: card.name,
      initval: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'radio',
      key: 'chartType',
      field: 'chartType',
      label: '图表类型',
      initVal: card.chartType || 'antv',
      initval: card.chartType || 'antv',
      required: true,
      options: [
        { value: 'antv', text: 'antv' },
        { value: 'echarts', text: 'echarts' }
        { value: 'antv', label: 'antv5.0' },
        { value: 'echarts', label: 'echarts' }
      ]
    },
    {
      type: 'number',
      key: 'width',
      field: 'width',
      label: '宽度',
      initVal: card.width,
      initval: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
@@ -57,67 +57,45 @@
    },
    {
      type: 'styleInput',
      key: 'height',
      field: 'height',
      label: '图表高度',
      initVal: card.height,
      initval: card.height,
      tooltip: '图表绘图区域的高度，不包括标题及内外边距。',
      required: true,
      options: ['px', 'vh', 'vw']
    },
    {
      type: 'radio',
      key: 'permission',
      field: 'permission',
      label: '权限验证',
      initVal: card.permission || 'false',
      initval: card.permission || 'false',
      required: false,
      options: [
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType || ispop || isprint
    },
    {
      type: 'radio',
      key: 'cacheLocal',
      field: 'cacheLocal',
      label: '本地缓存',
      initVal: card.cacheLocal || 'true',
      initval: card.cacheLocal || 'true',
      required: false,
      options: [
        {value: 'true', text: '继承菜单'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '继承菜单'},
        {value: 'false', label: '禁用'},
      ],
      forbid: ispop || isprint
    },
    {
      type: 'select',
      key: 'blacklist',
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      initval: card.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType || isprint
    },
    // {
    //   type: 'cascader',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || [],
    //   tooltip: '在使用柱形图且未启用自定义设置时有效。',
    //   required: false,
    //   forbid: appType === 'pc' || appType === 'mob',
    //   options: menulist
    // },
    // {
    //   type: 'select',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || '',
    //   tooltip: '双击柱状图，会打开关联的菜单。',
    //   required: false,
    //   forbid: appType !== 'pc',
    //   options: menulist
    // },
    
    }
  ]
}

 src/menu/components/chart/chart-custom/chartcompile/index.jsx

@@ -9,7 +9,7 @@
// import './index.scss'

const { TabPane } = Tabs
const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform'))
const ModalForm = asyncComponent(() => import('@/components/normalform/modalform'))
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))

class CustomChartDrawerForm extends Component {
@@ -104,10 +104,10 @@
          {config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null}
          <Tabs activeKey={view} onChange={this.changeTab}>
            <TabPane tab="组件设置" key="base">
              <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
              <ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
            </TabPane>
            {plot ? <TabPane tab="JS" key="JS">
              {plot.chartType === 'antv' ? <div>入参：Chart、 DataSet、 wrap（dom节点）、data、 config</div> : <div>入参：echarts、 DataSet、 wrap（dom节点）、 data、 config</div>}
              {plot.chartType === 'antv' ? <div>入参：Chart、 chartId（dom节点id）、data、 config</div> : <div>入参：echarts、 chartId（dom节点id）、 data、 config</div>}
              <CodeMirror mode="text/javascript" theme="cobalt" value={plot.script} onChange={this.onChange} />
            </TabPane> : null}
          </Tabs>

 src/menu/components/share/normalform/index.jsx

File was deleted

 src/menu/components/share/normalform/index.scss

File was deleted

 src/menu/components/table/base-table/columns/editColumn/formconfig.jsx

@@ -401,6 +401,18 @@
    },
    {
      type: 'radio',
      key: 'lostTip',
      label: '图片缺失',
      initVal: card.lostTip || 'true',
      tooltip: '图片地址不存在时，是否提示图片丢失。',
      required: false,
      options: [
        { value: 'true', text: '提示' },
        { value: 'false', text: '不提示' }
      ]
    },
    {
      type: 'radio',
      key: 'perspective',
      label: '字段透视',
      initVal: card.perspective || '',

 src/menu/components/table/base-table/columns/editColumn/index.jsx

@@ -13,7 +13,7 @@
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'blacklist', 'perspective', 'sum', 'rowspan'],
  link: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'joint', 'Width', 'fieldlength', 'blacklist', 'nameField'],
  textarea: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'fieldlength', 'prefix', 'postfix', 'blacklist'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'fieldlength', 'blacklist', 'scale', 'lenWidRadio', 'backgroundSize', 'span'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'fieldlength', 'blacklist', 'scale', 'lenWidRadio', 'backgroundSize', 'span', 'lostTip'],
  video: ['label', 'field', 'type', 'Align', 'Hide', 'startTime', 'Width', 'fieldlength', 'blacklist', 'aspectRatio'],
  colspan: ['label', 'type', 'Align', 'Hide', 'blacklist'],
  custom: ['label', 'type', 'Align', 'Width', 'blacklist', 'IsSort'],

 src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx

@@ -361,6 +361,18 @@
    },
    {
      type: 'radio',
      key: 'lostTip',
      label: '图片缺失',
      initVal: card.lostTip || 'true',
      tooltip: '图片地址不存在时，是否提示图片丢失。',
      required: false,
      options: [
        { value: 'true', text: '提示' },
        { value: 'false', text: '不提示' }
      ]
    },
    {
      type: 'radio',
      key: 'perspective',
      label: '字段透视',
      initVal: card.perspective || '',

 src/menu/components/table/normal-table/columns/editColumn/index.jsx

@@ -14,7 +14,7 @@
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'blacklist', 'perspective', 'sum', 'rowspan'],
  link: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'joint', 'Width', 'blacklist', 'nameField'],
  textarea: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'blacklist'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'blacklist', 'scale', 'lenWidRadio', 'backgroundSize', 'span'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'blacklist', 'scale', 'lenWidRadio', 'backgroundSize', 'span', 'lostTip'],
  video: ['label', 'field', 'type', 'Align', 'Hide', 'startTime', 'Width', 'blacklist', 'aspectRatio'],
  colspan: ['label', 'type', 'Align', 'Hide', 'blacklist'],
  custom: ['label', 'type', 'Align', 'Width', 'blacklist', 'IsSort'],

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -701,7 +701,7 @@
        urls.forEach((u, i) => {
          contents.push(<div className={'ant-col ant-col-' + card.width} key={card.uuid + i} style={_style_} span={card.width}>
            <div style={_style} onClick={(e) => {this.openNewView(e, card)}}>
              <MkPicture style={_imagestyle} scale={scale} url={u} urls={urls}/>
              <MkPicture style={_imagestyle} lostTip={card.lostTip !== 'false'} scale={scale} url={u} urls={urls}/>
            </div>
          </div>)
        })

 src/tabviews/custom/components/share/normalTable/index.jsx

@@ -268,7 +268,7 @@
        <div>
          {photos.map((url, i) => (
            <Col key={i} span={col.span || 24}>
              <MkPicture style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/>
              <MkPicture lostTip={col.lostTip !== 'false'} style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/>
            </Col>
          ))}
        </div>

 src/tabviews/zshare/normalTable/index.jsx

@@ -655,7 +655,7 @@
      return (
        <div className="picture-col">
          {photos.map((url, i) => (<Col key={i} span={item.span || 24}>
            <MkPicture style={style} scale={scale} url={url} urls={photos}/>
            <MkPicture lostTip={item.lostTip !== 'false'} style={style} scale={scale} url={url} urls={photos}/>
          </Col>))}
        </div>
      )