2024-05-27

king

2024-05-27 31aa3ba8a4b028d04c43b5960e23820abffd1ad1

2024-05-27

 src/assets/img/map.jpg

 src/index.js

@@ -260,9 +260,13 @@
      GLOB.storeFiles = true
      GLOB.storeDate = Math.ceil((new Date(d).getTime() - new Date().getTime()) / 86400000)
    } else if (GLOB.licenseKey && config.storeKey && config.storeKey.length === 16) {
      let trans = {A:0, B:1, C:2, D:3, E:4, F:5, G:6, H:7, I:8, J:9}
      let d = config.storeKey.slice(0, 8)

      d = d.split('').map(k => trans[k]).join('')

      let key = config.storeKey.slice(8)
      let _key = GLOB.appId + GLOB.appkey + 'e_files_key'
      let _key = GLOB.appId + GLOB.appkey + 'e_files_key' + d
      _key = md5(_key.toLowerCase())
      _key = _key.toUpperCase()
      _key = _key.slice(-8)
@@ -270,8 +274,6 @@
      if (key === _key) {
        GLOB.storeFiles = true
        
        let trans = {A:0, B:1, C:2, D:3, E:4, F:5, G:6, H:7, I:8, J:9} 
        d = d.split('').map(k => trans[k]).join('')
        d = d.slice(0, 4) + '-' + d.slice(4, 6) + '-' + d.slice(6)
        GLOB.storeDate = Math.ceil((new Date(d).getTime() - new Date().getTime()) / 86400000)
      }

 src/mob/components/txmap/index.jsx

New file
@@ -0,0 +1,135 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { ToolOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons'

import { resetStyle } from '@/utils/utils-custom.js'
import asyncIconComponent from '@/utils/asyncIconComponent'
import getWrapForm from './options'
import MKEmitter from '@/utils/events.js'
import MkMap from '@/assets/img/map.jpg'
import './index.scss'

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))

class MapComponent extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateConfig: PropTypes.func,
    deletecomponent: PropTypes.func
  }

  state = {}

  /**
   * @description 搜索条件初始化
   */
  UNSAFE_componentWillMount () {
    const { card } = this.props

    if (card.isNew) {
      let _card = {
        uuid: card.uuid,
        type: card.type,
        width: 24,
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, datatype: 'static' },
        style: {marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px', height: '100vh'},
        columns: [],
        scripts: [],
      }
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

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

  getStyle = (style) => {
    let _card = {...this.state.card, style}

    this.setState({
      card: _card
    })
    
    this.props.updateConfig(_card)
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', ['height', 'padding', 'margin'], card.style, this.getStyle)
  }

  /**
   * @description 卡片行外层信息更新（数据源，样式等）
   */
  updateComponent = (component) => {
    this.setState({
      card: component
    })

    component.width = component.wrap.width
    component.name = component.wrap.name

    this.props.updateConfig(component)
  }

  getWrapForms = () => {
    const { wrap } = this.state.card

    return getWrapForm(wrap)
  }

  updateWrap = (res) => {
    this.updateComponent({...this.state.card, wrap: res})
  }

  render() {
    const { card } = this.state
    let _style = resetStyle(card.style)

    return (
      <div className="map-wrap" id={card.uuid} style={_style}>
        <div className="map-image" style={{backgroundImage: `url('${MkMap}')`}}></div>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} />
            {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
            {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null}
          </div>
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }
}

export default MapComponent

 src/mob/components/txmap/index.scss

New file
@@ -0,0 +1,35 @@
.map-wrap {
  min-height: 84px;
  position: relative;
  background: #ffffff;
  overflow: hidden;

  >.anticon-tool {
    position: absolute;
    z-index: 3;
    font-size: 16px;
    right: 1px;
    top: 1px;
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }
  .map-image {
    background: #ffffff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
  }
}

.map-wrap::after {
  display: block;
  content: ' ';
  clear: both;
}
.map-wrap:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

 src/mob/components/txmap/options.jsx

New file
@@ -0,0 +1,28 @@
/**
 * @description Wrap表单配置信息
 */
export default function (wrap) {
  const wrapForm = [
    {
      type: 'text',
      field: 'name',
      label: '组件名称',
      initval: wrap.name || '',
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      field: 'width',
      label: '宽度',
      initval: wrap.width || 24,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      precision: 0,
      required: true
    }
  ]

  return wrapForm
} 

 src/mob/mobshell/card.jsx

@@ -31,6 +31,7 @@
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const OfficialAccount = asyncComponent(() => import('@/mob/components/official'))
const ShareCode = asyncComponent(() => import('@/mob/components/sharecode'))
const TxMap = asyncComponent(() => import('@/mob/components/txmap'))
const Iframe = asyncComponent(() => import('@/menu/components/iframe'))
const DoubleDataCard = asyncComponent(() => import('@/menu/components/card/double-data-card'))

@@ -150,6 +151,8 @@
      return (<Iframe card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'sharecode') {
      return (<ShareCode card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'map') {
      return (<TxMap card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }


 src/mob/mobshell/index.jsx

@@ -162,6 +162,7 @@
        timeline: '时间轴',
        officialAccount: '关注公众号',
        sharecode: '分享码',
        map: '地图',
        iframe: 'iframe',
        login: '登录'
      }

 src/mob/modulesource/option.jsx

@@ -28,6 +28,7 @@
import officialAccount from '@/assets/mobimg/guanzhu.jpg'
import Iframe from '@/assets/img/newpage.jpg'
import Share from '@/assets/mobimg/share.jpg'
import MkMap from '@/assets/img/map.jpg'

// 组件配置信息
export const menuOptions = [
@@ -61,6 +62,7 @@
  { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '注册/登录', width: 24 },
  { type: 'menu', url: MkMap, component: 'map', subtype: 'txmap', title: '地图', width: 24, adapter: 'mini' },
  { type: 'menu', url: officialAccount, component: 'officialAccount', subtype: 'officialAccount', title: '关注公众号（小程序中）', width: 24, adapter: 'mini' },
  { type: 'menu', url: Share, component: 'sharecode', subtype: 'sharecode', title: '分享码', width: 24 },
  { type: 'menu', url: Iframe, component: 'iframe', subtype: 'iframe', title: 'iframe', width: 24 }