From 31aa3ba8a4b028d04c43b5960e23820abffd1ad1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 27 五月 2024 14:23:09 +0800
Subject: [PATCH] 2024-05-27
---
src/index.js | 8 +
src/mob/components/txmap/index.jsx | 135 +++++++++++++++++++++++++++++++++
src/assets/img/map.jpg | 0
src/mob/components/txmap/index.scss | 35 ++++++++
src/mob/components/txmap/options.jsx | 28 +++++++
src/mob/mobshell/index.jsx | 1
src/mob/mobshell/card.jsx | 3
src/mob/modulesource/option.jsx | 2
8 files changed, 209 insertions(+), 3 deletions(-)
diff --git a/src/assets/img/map.jpg b/src/assets/img/map.jpg
new file mode 100644
index 0000000..5dd38ff
--- /dev/null
+++ b/src/assets/img/map.jpg
Binary files differ
diff --git a/src/index.js b/src/index.js
index b6c7c93..2fbab2f 100644
--- a/src/index.js
+++ b/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)
}
diff --git a/src/mob/components/txmap/index.jsx b/src/mob/components/txmap/index.jsx
new file mode 100644
index 0000000..8962ee9
--- /dev/null
+++ b/src/mob/components/txmap/index.jsx
@@ -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
\ No newline at end of file
diff --git a/src/mob/components/txmap/index.scss b/src/mob/components/txmap/index.scss
new file mode 100644
index 0000000..e43197f
--- /dev/null
+++ b/src/mob/components/txmap/index.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/mob/components/txmap/options.jsx b/src/mob/components/txmap/options.jsx
new file mode 100644
index 0000000..93bebd4
--- /dev/null
+++ b/src/mob/components/txmap/options.jsx
@@ -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
+}
\ No newline at end of file
diff --git a/src/mob/mobshell/card.jsx b/src/mob/mobshell/card.jsx
index ca91322..c5a1344 100644
--- a/src/mob/mobshell/card.jsx
+++ b/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}/>)
}
}
diff --git a/src/mob/mobshell/index.jsx b/src/mob/mobshell/index.jsx
index c7b5442..257a3d7 100644
--- a/src/mob/mobshell/index.jsx
+++ b/src/mob/mobshell/index.jsx
@@ -162,6 +162,7 @@
timeline: '鏃堕棿杞�',
officialAccount: '鍏虫敞鍏紬鍙�',
sharecode: '鍒嗕韩鐮�',
+ map: '鍦板浘',
iframe: 'iframe',
login: '鐧诲綍'
}
diff --git a/src/mob/modulesource/option.jsx b/src/mob/modulesource/option.jsx
index c5c6c61..9e80200 100644
--- a/src/mob/modulesource/option.jsx
+++ b/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 }
--
Gitblit v1.8.0