neo-cmp-cli 1.3.6 → 1.3.8

package/src/template/echarts-custom-cmp-template/src/components/map-widget/index.tsx

@@ -0,0 +1,385 @@
+import * as React from 'react';
+import { getUrlParam } from '../../utils/url';
+import './style.scss';
+
+// 扩展 Window 接口以支持 AMap
+declare global {
+  interface Window {
+    AMap: any;
+  }
+}
+
+interface MapWidgetProps {
+  // 经度
+  longitude?: number;
+  // 纬度
+  latitude?: number;
+  // 位置名称（支持地址搜索）
+  locationName?: string;
+  // 地图缩放级别 (3-18)
+  zoom?: number;
+  // 标记点标题
+  markerTitle?: string;
+  // 地图高度
+  height?: number;
+  data?: any;
+}
+
+interface MapWidgetState {
+  isLoading: boolean;
+  error?: string;
+  currentAddress?: string;
+  urlLocationName?: string;
+}
+
+/**
+ * 地图展示组件
+ * 支持传入经纬度坐标或位置名称，展示对应的地图区域并标注当前位置
+ * 基于高德地图API实现
+ */
+export default class MapWidget extends React.PureComponent<
+  MapWidgetProps,
+  MapWidgetState
+> {
+  private map: any = null;
+
+  private AMap: any = null;
+
+  private marker: any = null;
+
+  private mapContainer: string = 'map-widget-container';
+
+  private locationName?: string = '';
+
+  constructor(props: MapWidgetProps) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+      error: undefined,
+      currentAddress: '',
+      urlLocationName: getUrlParam('location') || props.locationName || '',
+    };
+  }
+
+  componentDidMount() {
+    this.loadAMapScript();
+    // 监听 URL 变化
+    window.addEventListener('popstate', this.handleUrlChange);
+    window.addEventListener('hashchange', this.handleUrlChange);
+  }
+
+  componentDidUpdate(prevProps: Readonly<MapWidgetProps>): void {
+    const { longitude, latitude, locationName, zoom = 14 } = this.props;
+    const {
+      longitude: prevLongitude,
+      latitude: prevLatitude,
+      zoom: prevZoom = 14,
+      locationName: prevLocationName,
+    } = prevProps;
+    if (
+      longitude !== prevLongitude ||
+      latitude !== prevLatitude ||
+      locationName !== prevLocationName ||
+      zoom !== prevZoom
+    ) {
+      this.initMap(locationName);
+    }
+  }
+
+  componentWillUnmount() {
+    // 移除 URL 监听器
+    window.removeEventListener('popstate', this.handleUrlChange);
+    window.removeEventListener('hashchange', this.handleUrlChange);
+
+    if (this.map) {
+      this.map.destroy();
+      this.map = null;
+    }
+  }
+
+  /**
+   * 处理 URL 变化事件
+   */
+  handleUrlChange = () => {
+    const newLocationName = getUrlParam('location');
+
+    // 如果 URL 中的 location 参数发生变化，则重新初始化地图
+    if (newLocationName !== this.locationName) {
+      this.setState(
+        {
+          urlLocationName: newLocationName,
+          error: undefined,
+        },
+        () => {
+          // 重新初始化地图
+          this.initMap(newLocationName);
+        },
+      );
+    }
+  };
+
+  /**
+   * 动态加载高德地图脚本
+   */
+  loadAMapScript = () => {
+    // 检查是否已加载
+    if (window.AMap) {
+      this.AMap = window.AMap;
+      this.initMap();
+      return;
+    }
+
+    this.setState({
+      isLoading: true,
+    });
+
+    // 使用 NeoCRM 部署的高德地图脚本: 使用企业内部部署的高德地图脚本，无需单独申请 API Key
+    const scriptUrl = 'https://neors.ingageapp.com/base/js/amap_2.0.5.21.js';
+    // 备用方案：使用高德官方API（需要申请key）
+    // const amapKey = 'your-amap-key-here';
+    // const scriptUrl = `https://webapi.amap.com/maps?v=2.0&key=${amapKey}&plugin=AMap.Geocoder,AMap.Marker`;
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = scriptUrl;
+    script.async = true;
+
+    script.onload = () => {
+      this.AMap = window.AMap;
+      this.initMap();
+
+      this.setState({
+        isLoading: false,
+      });
+    };
+
+    script.onerror = () => {
+      this.setState({
+        isLoading: false,
+        error: '地图加载失败，请检查网络连接或配置地图API Key',
+      });
+    };
+
+    document.head.appendChild(script);
+  };
+
+  /**
+   * 初始化地图
+   */
+  initMap = (_locationName?: string) => {
+    const { longitude, latitude, locationName, zoom = 14 } = this.props;
+    const { urlLocationName } = this.state;
+
+    // 优先使用 URL 中的 location 参数
+    const finalLocationName = _locationName || urlLocationName || locationName;
+
+    this.locationName = finalLocationName;
+
+    // 如果提供了位置名称（URL 或 props），先进行地理编码
+    if (finalLocationName) {
+      this.geocodeAddress(finalLocationName, zoom);
+    }
+    // 如果提供了经纬度，直接初始化地图
+    else if (longitude !== undefined && latitude !== undefined) {
+      this.createMap([longitude, latitude], zoom);
+    }
+    // 默认显示北京天安门
+    else {
+      this.createMap([116.397428, 39.90923], zoom);
+    }
+  };
+
+  /**
+   * 地理编码：先将地址转换为经纬度，再创建地图
+   */
+  geocodeAddress = (address: string, zoom: number) => {
+    if (!this.AMap) {
+      return;
+    }
+
+    // 动态加载 Geocoder 插件
+    this.AMap.plugin('AMap.Geocoder', () => {
+      const geocoder = new this.AMap.Geocoder();
+
+      geocoder.getLocation(address, (status: string, result: any) => {
+        if (status === 'complete' && result.geocodes.length > 0) {
+          const location = result.geocodes[0].location;
+          this.createMap([location.lng, location.lat], zoom);
+          this.setState({
+            currentAddress: result.geocodes[0].formattedAddress,
+          });
+        } else {
+          this.setState({
+            error: `地址解析失败: ${address}`,
+          });
+          // 使用默认位置
+          this.createMap([116.397428, 39.90923], zoom);
+        }
+      });
+    });
+  };
+
+  /**
+   * 创建地图实例
+   */
+  createMap = (center: [number, number], zoom: number) => {
+    if (!this.AMap) {
+      return;
+    }
+
+    try {
+      // 创建地图实例
+      this.map = new this.AMap.Map(this.mapContainer, {
+        zoom,
+        center,
+        resizeEnable: true,
+        viewMode: '2D',
+      });
+
+      // 添加标记点
+      this.addMarker(center);
+
+      // 获取当前位置的地址信息
+      this.getAddressByLocation(center);
+    } catch (error) {
+      console.log('地图初始化失败 / error:', error);
+      this.setState({
+        error: '地图初始化失败',
+      });
+    }
+  };
+
+  /**
+   * 添加标记点
+   */
+  addMarker = (position: [number, number]) => {
+    if (!this.AMap || !this.map) {
+      return;
+    }
+
+    const { markerTitle } = this.props;
+
+    // 移除已存在的标记
+    if (this.marker) {
+      this.map.remove(this.marker);
+    }
+
+    // 创建自定义红色图标
+    const redIcon = new this.AMap.Icon({
+      size: new this.AMap.Size(50, 68),
+      image:
+        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+      imageSize: new this.AMap.Size(50, 68),
+    });
+
+    // 创建标记点（红色）
+    this.marker = new this.AMap.Marker({
+      position,
+      title: markerTitle || '当前位置',
+      map: this.map,
+      anchor: 'bottom-center',
+      icon: redIcon,
+    });
+
+    // 点击标记显示信息窗体
+    this.marker.on('click', () => {
+      const infoWindow = new this.AMap.InfoWindow({
+        content: `<div class="map-info-window">
+          <div class="info-title">${markerTitle || '当前位置'}</div>
+          <div class="info-address">${
+            this.state.currentAddress || '正在获取地址...'
+          }</div>
+        </div>`,
+        offset: new this.AMap.Pixel(0, -30),
+      });
+      infoWindow.open(this.map, position);
+    });
+  };
+
+  /**
+   * 逆地理编码：根据经纬度获取地址信息
+   */
+  getAddressByLocation = (location: [number, number]) => {
+    if (!this.AMap) {
+      return;
+    }
+
+    // 动态加载 Geocoder 插件
+    this.AMap.plugin('AMap.Geocoder', () => {
+      const geocoder = new this.AMap.Geocoder();
+
+      geocoder.getAddress(location, (status: string, result: any) => {
+        if (status === 'complete' && result.regeocode) {
+          this.setState({
+            currentAddress: result.regeocode.formattedAddress,
+          });
+        }
+      });
+    });
+  };
+
+  render() {
+    const { height = 400, data } = this.props;
+    const { isLoading, error } = this.state;
+
+    const curAmisData = data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    console.log('this.props:', this.props);
+
+    return (
+      <div className="map-widget-wrapper">
+        {/* 
+          // 地图头部: 显示地图标题和当前位置地址
+        <div className="map-widget-header">
+          <h3 className="map-widget-title">
+            地图展示
+            {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+          </h3>
+          {this.state.currentAddress && (
+            <div className="map-widget-address">
+              <span className="address-icon">📍</span>
+              <span className="address-text">{this.state.currentAddress}</span>
+            </div>
+          )}
+        </div>
+        */}
+        <div className="map-widget-container-wrapper" style={{ height }}>
+          {isLoading && (
+            <div className="map-loading">
+              <div className="loading-spinner"></div>
+              <div className="loading-text">地图加载中...</div>
+            </div>
+          )}
+
+          {error && (
+            <div className="map-error">
+              <div className="error-icon">⚠️</div>
+              <div className="error-text">{error}</div>
+            </div>
+          )}
+
+          <div
+            id={this.mapContainer}
+            className="map-widget-container"
+            style={{ display: isLoading || error ? 'none' : 'block' }}
+          ></div>
+        </div>
+
+        <div className="map-widget-footer">
+          <div className="map-info">
+            <span className="info-label">经度：</span>
+            <span className="info-value">{this.props.longitude || '-'}</span>
+            <span className="info-separator">|</span>
+            <span className="info-label">纬度：</span>
+            <span className="info-value">{this.props.latitude || '-'}</span>
+            <span className="info-separator">|</span>
+            <span className="info-label">缩放：</span>
+            <span className="info-value">{this.props.zoom || 14}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/template/echarts-custom-cmp-template/src/components/map-widget/model.ts

@@ -0,0 +1,105 @@
+/**
+ * @file 地图组件对接编辑器的描述文件
+ */
+export class MapWidgetModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'map-widget';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '地图组件';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '地图展示组件，支持传入经纬度或地址名称';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/map.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    label: '地图组件',
+    // longitude: 116.397428, // 北京天安门经度
+    // latitude: 39.90923, // 北京天安门纬度
+    locationName: '北京市天安门广场', // 位置名称（可选）
+    zoom: 14, // 缩放级别
+    markerTitle: '当前位置', // 标记点标题
+    height: 400, // 地图高度
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '地图组件',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'text',
+      name: 'locationName',
+      label: '位置名称',
+      placeholder: '例如：北京市天安门广场',
+      description: '输入地址名称自动定位（优先级高于经纬度）',
+    },
+    {
+      type: 'number',
+      name: 'longitude',
+      label: '经度',
+      // value: 116.397428,
+      min: -180,
+      max: 180,
+      step: 0.000001,
+      precision: 6,
+    },
+    {
+      type: 'number',
+      name: 'latitude',
+      label: '纬度',
+      // value: 39.90923,
+      min: -90,
+      max: 90,
+      step: 0.000001,
+      precision: 6,
+    },
+    {
+      type: 'text',
+      name: 'markerTitle',
+      label: '标记点标题',
+      value: '当前位置',
+    },
+    {
+      type: 'number',
+      name: 'zoom',
+      label: '缩放级别',
+      value: 14,
+      min: 3,
+      max: 18,
+      description: '地图缩放级别，3-18之间，数值越大越详细',
+    },
+    {
+      type: 'number',
+      name: 'height',
+      label: '地图高度',
+      value: 400,
+      min: 200,
+      max: 800,
+      step: 50,
+      description: '地图容器的高度（像素）',
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default MapWidgetModel;

package/src/template/echarts-custom-cmp-template/src/components/map-widget/style.scss

@@ -0,0 +1,192 @@
+// 地图组件样式文件
+.map-widget-wrapper {
+  width: 100%;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  .map-widget-header {
+    padding: 16px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+
+    .map-widget-title {
+      margin: 0 0 8px 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .map-widget-address {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      opacity: 0.95;
+
+      .address-icon {
+        margin-right: 6px;
+        font-size: 16px;
+      }
+
+      .address-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .map-widget-container-wrapper {
+    position: relative;
+    background: #f5f5f5;
+
+    .map-widget-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .map-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background: #fafafa;
+
+      .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid #e0e0e0;
+        border-top-color: #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      .loading-text {
+        margin-top: 16px;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+
+    .map-error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background: #fff5f5;
+
+      .error-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .error-text {
+        color: #f56c6c;
+        font-size: 14px;
+        text-align: center;
+        padding: 0 20px;
+      }
+    }
+  }
+
+  .map-widget-footer {
+    padding: 12px 20px;
+    background: #fafafa;
+    border-top: 1px solid #e8e8e8;
+
+    .map-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: #666;
+
+      .info-label {
+        color: #999;
+        margin-right: 4px;
+      }
+
+      .info-value {
+        color: #333;
+        font-weight: 500;
+      }
+
+      .info-separator {
+        margin: 0 12px;
+        color: #d9d9d9;
+      }
+    }
+  }
+
+  // 信息窗体样式
+  .map-info-window {
+    padding: 12px;
+    min-width: 200px;
+
+    .info-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .info-address {
+      font-size: 12px;
+      color: #666;
+      line-height: 1.5;
+    }
+  }
+}
+
+// 加载动画
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .map-widget-wrapper {
+    .map-widget-header {
+      padding: 12px 16px;
+
+      .map-widget-title {
+        font-size: 16px;
+      }
+
+      .map-widget-address {
+        font-size: 12px;
+      }
+    }
+
+    .map-widget-footer {
+      padding: 10px 16px;
+
+      .map-info {
+        font-size: 11px;
+
+        .info-separator {
+          margin: 0 8px;
+        }
+      }
+    }
+  }
+}
+
+// 高德地图样式覆盖
+.amap-logo,
+.amap-copyright {
+  display: none !important;
+}
+
+.amap-marker-label {
+  border: none;
+  background-color: transparent;
+}