*）增加原指标下载弹窗

packages/graphmod-tool/src/download/DownloadModel.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Input } from 'amos-framework';
+import { withModalForm, BaseForm } from 'amos-designer';
+import { api, tools } from '@gm/graphmod-utils';
+
+const { templateDownload } = api;
+const FormItem = Form.Item;
+
+/**
+ * 导入数据
+ * @class ImportData
+ * @extends {Component}
+ */
+@withModalForm({
+  width: 400,
+  title: '导出SQL脚本'
+})
+class DownloadModel extends BaseForm {
+  constructor(props) {
+    super(props);
+    const user = tools.getUserOrg() ?? {};
+    this.state = {
+      form: {
+        agencyCode: user.agencyCode ?? ''
+      }
+    };
+  }
+
+  onCancel = () => {
+    this.setState({ form: {} }, () => {
+      this.props.onClose && this.props.onClose();
+    });
+  };
+
+  onSubmit = () => {
+    const { selectedRowKeys = [], dataConfig = {} } = this.props;
+    this.props.onClose();
+    this.props.handleOpen('logsVisible');
+    if (dataConfig.dimension && selectedRowKeys.length > 0) {
+      dataConfig[dataConfig.dimension] = selectedRowKeys.join(',');
+    }
+    templateDownload(dataConfig);
+  };
+
+  render() {
+    const { form } = this.state;
+
+    return (
+      <Form
+        style={{ paddingRight: 20 }}
+        ref={this.props.saveFormRef}
+        model={form}
+        labelWidth="8em"
+        filled
+      >
+        <FormItem label="所属机构" field="agencyCode">
+          <Input placeholder="请输入" value={form.agencyCode} onChange={this.genHandle('agencyCode')} />
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+DownloadModel.propTypes = {
+  saveFormRef: PropTypes.func,
+  visible: PropTypes.bool,
+  onClose: PropTypes.func
+};
+
+export default DownloadModel;

packages/graphmod-tool/src/download/DownloadView.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { BarGroup, IconButton, briskWarningTip } from 'amos-designer';
+import { Icon } from 'amos-framework';
+import { api } from '@gm/graphmod-utils';
+import { connectGlobalPage } from '@gm/graphmod-common';
+import ExecuteProgress from './ExecuteProgress';
+
+const { templateDownload } = api;
+
+/**
+ * 导出sql脚本模块
+ * @class DownloadView
+ * @extends {Component}
+ */
+@connectGlobalPage({
+  testDataConfig: {
+    // resourceCode: 'StudioApplication', // 标识
+    // dimension: 'appSeq', // 字段
+    // appSeq: '1620614032232841218',
+    // mqttUrl: 'ws://172.16.3.18:8088/mqtt'
+  }
+})
+class DownloadView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      downloadVisible: false,
+      logsVisible: false,
+      selectId: ''
+    };
+  }
+
+  handleClose = (key) => {
+    this.setState({
+      [key]: false
+    });
+  };
+
+  handleOpen = (key) => {
+    this.setState({
+      [key]: true
+    });
+  };
+
+  handleItemClick = () => {
+    const { selectedRowKeys = [], dataConfig, record } = this.props;
+    if (selectedRowKeys.length > 0 || record) {
+      this.setState({ selectId: selectedRowKeys.length === 0 ? record.id ?? record.sequenceNbr  : selectedRowKeys[0], logsVisible: true }, () => {
+        if (dataConfig.dimension && (selectedRowKeys.length > 0 || record)) {
+          dataConfig[dataConfig.dimension] = (record ? record.id ?? record.sequenceNbr : null) || selectedRowKeys.join(',');
+          templateDownload({ resourceCode: dataConfig.resourceCode, dimension: dataConfig.dimension, [dataConfig.dimension]: dataConfig[dataConfig.dimension] });
+        }
+      });
+    } else {
+      briskWarningTip('至少选择一行数据');
+    }
+  };
+
+  render() {
+    const { dataConfig = {} } = this.props;
+    const { logsVisible, selectId } = this.state;
+    return (
+      <div>
+        {dataConfig.position === 'header' ?
+          <div className="ig-stage-toolbar-right">
+            <BarGroup label="导出脚本" mode="none" position="right">
+              <IconButton colorful icon="export" title="导出SQL脚本" style={{ borderRadius: 4 }} onClick={() => this.handleItemClick()} />
+            </BarGroup>
+          </div>
+          :
+          <p onClick={this.handleItemClick}><Icon icon="download" />下载</p>
+        }
+        {/* <DownloadModel
+          visible={downloadVisible}
+          onClose={() => this.handleClose('downloadVisible')}
+          handleOpen={() => this.handleOpen()}
+          dataConfig={dataConfig}
+        /> */}
+        <ExecuteProgress visible={logsVisible} mqttUrl={dataConfig.mqttUrl} exeId={selectId} onClose={() => this.handleClose('logsVisible')} />
+      </div>
+    );
+  }
+}
+
+DownloadView.propTypes = {
+  selectedRowKeys: PropTypes.array,
+  dataConfig: PropTypes.object,
+  record: PropTypes.object
+};
+
+export default DownloadView;

packages/graphmod-tool/src/download/ExecuteProgress.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withSubscribeMQTT, parseMessage, MQTTProvider } from 'amos-mqtt';
+import { Modal, briskWarningTip } from 'amos-designer';
+import ExecuteProgressContent from './ExecuteProgressContent';
+
+/**
+ * 执行进度
+ * @class ExecuteProgress
+ * @extends {ExecuteProgress}
+ */
+class ExecuteProgress extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      content: null,
+      data: {}
+    };
+  }
+
+  componentDidMount() {
+    this.initMqttTopic();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.exeId !== prevProps.exeId) {
+      this.initMqttTopic();
+    }
+  }
+
+  initMqttTopic = () => {
+    const { exeId } = this.props;
+    if (exeId) {
+      const content = withSubscribeMQTT({
+        topic: `/topicTable/solidify/${exeId.indexOf(',') !== -1 ? exeId.split(',')[0] : exeId}`,
+        dispatch: (_topic, message, packet) => {
+          const newMsg = parseMessage(message);
+          this.setState({ data: { message: newMsg, messageFlag: Date.now() } });
+        }
+      })(ExecuteProgressContent);
+      this.setState({ content });
+    }
+  }
+
+  cancel = () => {
+    const { data } = this.state;
+    if (!data.message || data.message.status === 'running') {
+
+    }
+    this.props.onClose && this.props.onClose();
+  }
+
+  render() {
+    const { visible, mqttUrl } = this.props;
+    const { data, content: Content } = this.state;
+    if (!Content) {
+      return null;
+    }
+    return (
+      <MQTTProvider url={mqttUrl || '/mqtt'}>
+        <Modal
+          header="立即执行进度"
+          visible={visible}
+          width={474}
+          noDefaultFooter
+          showMax
+          onCancel={this.cancel}
+          outterClosable={false}
+          content={
+            <Content message={data.message} messageFlag={data.messageFlag} />
+          }
+        />
+      </MQTTProvider>
+    );
+  }
+}
+
+ExecuteProgress.propTypes = {
+  visible: PropTypes.bool,
+  onClose: PropTypes.func,
+  exeId: PropTypes.string,
+  mqttUrl: PropTypes.string
+};
+
+export default ExecuteProgress;

packages/graphmod-tool/src/download/ExecuteProgressContent.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Progress } from 'amos-framework';
+
+/**
+ * 立即执行进度
+ * @class ExecuteProgressContent
+ * @extends {ExecuteProgress}
+ */
+class ExecuteProgressContent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      percent: 0,
+      status: 'running',
+      flag: false,
+      logs: []
+    };
+  }
+
+  componentDidMount() {
+    this.onMessage();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.messageFlag !== this.props.messageFlag) {
+      this.onMessage();
+    }
+  }
+
+  onMessage = () => {
+    const { message } = this.props;
+    const { status, percent } = message || {};
+    if (status) {
+      const { logs } = this.state;
+      logs.push(message);
+      this.setState({ logs, percent, status }, () => {
+        this.scrollToBottom();
+      });
+    }
+  }
+
+  scrollToBottom = () => {
+    if (this.content && this.content.scrollHeight > this.content.clientHeight) {
+      const state = 10;
+      if (this.content.scrollHeight - this.content.clientHeight > state) {
+        this.content.scrollTop = this.content.scrollHeight - this.content.clientHeight;
+      }
+    }
+  }
+
+  render() {
+    const { logs, status, percent } = this.state;
+    return (
+      <div className="ig-execute-progress">
+        <Progress percent={percent} strokeWidth={16} status={status === 'error' ? 'exception' : status === 'finished' ? undefined : 'active'} />
+        <div className="ig-execute-progress-switch">进度详情</div>
+        <div className="ig-execute-progress-content" ref={node => this.content = node}>
+          <ul>
+            {
+              logs.map((e, index) => (
+                <li key={index} style={{ color: e.status === 'error' ? 'red' : '' }}>[{e.time}] {e.logInfo}{e.detail}</li>
+              ))
+            }
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+ExecuteProgressContent.propTypes = {
+  messageFlag: PropTypes.number,
+  message: PropTypes.object
+};
+
+export default ExecuteProgressContent;

packages/graphmod-tool/src/download/index.js

+
+import DownloadView from './DownloadView';
+import './index.scss';
+
+export default [
+  {
+    key: 'atl-download',
+    component: DownloadView
+  }
+];

packages/graphmod-tool/src/download/index.scss

+.ig-execute-progress {
+  .amos-progress {
+    margin-bottom: 12px;
+
+    &.amos-progress-status-exception {
+      .amos-progress-bg {
+        background-color: red;
+        border-radius: 0;
+      }
+    }
+
+    .amos-progress-inner {
+      background-image: linear-gradient(180deg, #eaeaea 0%, white 100%);
+      border: 1px solid #e6e6e6;
+      border-radius: 0;
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+    }
+
+    .amos-progress-bg {
+      background-color: #25ae16;
+      border-radius: 0;
+    }
+  }
+
+  &-switch {
+    margin-bottom: 18px;
+  }
+
+  &-content {
+    height: 300px;
+    padding: 15px 18px;
+    overflow-y: auto;
+    font-size: 13px;
+    line-height: 20px;
+    color: #0060ff;
+    border: 1px solid #e2e2e2;
+  }
+}

packages/graphmod-tool/src/index.js

@@ -2,10 +2,12 @@ import { chainModResult } from 'amos-viz/lib/widgets/modLoader';
 
 import './index.scss';
 import './cssvar.scss';
+import Download from './download';
 import Shifting from './siftingSort';
 import demo1 from './demo1';
 
 const IMods = [
+  ...Download,
   ...demo1,
   ...Shifting
 ];

packages/graphmod-tool/src/siftingSort/index.js

@@ -2,7 +2,7 @@ import Shifting from './Sort';
 
 export default [
   {
-    key: 'tzs-sort', // 筛选缩略图显示页面
+    key: 'atl-shifting', // 筛选缩略图显示页面
     component: Shifting
   }
 ];