| | |
| | | import React, { Component } from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Modal, Button, Drawer, Tooltip } from 'antd' |
| | | import { Modal, Button, Tooltip, Table } from 'antd' |
| | | import { ClockCircleOutlined, CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | successIds: [], |
| | | errorIds: [], |
| | | errorMsg: {}, |
| | | execId: '' |
| | | execId: '', |
| | | columns: [ |
| | | { |
| | | title: '组件名', |
| | | dataIndex: 'name', |
| | | width: '25%' |
| | | }, |
| | | { |
| | | title: '名称', |
| | | dataIndex: 'label', |
| | | width: '25%' |
| | | }, |
| | | { |
| | | title: '上级', |
| | | dataIndex: 'supName', |
| | | width: '20%', |
| | | render: (_, record) => { |
| | | if (record.supName) { |
| | | return `${record.supName}-${record.tabName}` |
| | | } |
| | | return '' |
| | | } |
| | | }, |
| | | { |
| | | title: '状态', |
| | | dataIndex: 'status', |
| | | align: 'center', |
| | | width: '15%', |
| | | render: (_, record) => { |
| | | let status = <ClockCircleOutlined /> |
| | | |
| | | if (this.state.successIds.includes(record.uuid)) { |
| | | status = <CheckCircleOutlined /> |
| | | } else if (this.state.errorIds.includes(record.uuid)) { |
| | | if (this.state.errorMsg[record.uuid]) { |
| | | status = <Tooltip placement="topLeft" title={this.state.errorMsg[record.uuid]}> |
| | | <CloseCircleOutlined /> |
| | | </Tooltip> |
| | | } else { |
| | | status = <CloseCircleOutlined /> |
| | | } |
| | | } else if (record.uuid === this.state.execId) { |
| | | status = <LoadingOutlined /> |
| | | } |
| | | return status |
| | | } |
| | | }, |
| | | { |
| | | title: 'DeepSeek', |
| | | dataIndex: 'DeepSeek', |
| | | align: 'center', |
| | | width: '15%', |
| | | render: (_, record) => { |
| | | return <span className="anticon anticon-deepseek" onClick={() => { |
| | | if (record.sql) { |
| | | sessionStorage.setItem('deepseek_sql', record.sql) |
| | | } |
| | | window.open('#/ai') |
| | | }}> |
| | | <svg viewBox="0 0 1391 1024" width="1.5em" height="1.5em" fill="currentColor"> |
| | | <path d="M1361.92 83.136c-14.272-7.04-20.416 6.272-28.736 12.992-2.816 2.24-5.248 5.12-7.68 7.68-20.8 22.336-45.056 36.864-76.8 35.136-46.464-2.56-86.08 12.032-121.152 47.616-7.552-43.904-32.256-70.08-69.888-86.912-19.712-8.768-39.68-17.472-53.376-36.48-9.664-13.44-12.288-28.48-17.216-43.264-3.008-8.96-6.08-18.112-16.32-19.712-11.2-1.728-15.552 7.68-19.968 15.424-17.536 32.128-24.32 67.52-23.68 103.296 1.6 80.448 35.52 144.576 103.04 190.144 7.68 5.312 9.6 10.56 7.168 18.176-4.608 15.68-10.048 30.976-14.912 46.592-3.072 10.112-7.68 12.352-18.304 8a308.224 308.224 0 0 1-97.28-66.176c-48-46.4-91.392-97.664-145.472-137.792a655.36 655.36 0 0 0-38.528-26.432c-55.232-53.76 7.232-97.792 21.632-103.04 15.104-5.376 5.312-24.128-43.52-23.936C652.032 24.704 607.36 41.024 550.4 62.72a156.8 156.8 0 0 1-26.048 7.68 542.016 542.016 0 0 0-161.408-5.696c-105.6 11.904-189.888 61.824-251.904 147.2C36.608 314.24 19.072 430.848 40.512 552.32c22.528 128 87.808 234.048 188.16 316.992 104 85.888 223.808 128 360.512 120 82.944-4.864 175.424-16 279.68-104.32 26.368 13.056 53.888 18.24 99.712 22.272 35.2 3.328 69.184-1.792 95.424-7.232 41.216-8.704 38.4-46.848 23.424-53.888-120.576-56.32-94.208-33.408-118.272-51.84 61.376-72.768 153.792-148.224 189.952-392.768 2.816-19.392 0.384-31.552 0-47.36-0.256-9.536 1.92-13.312 12.8-14.4a231.04 231.04 0 0 0 86.592-26.56c78.272-42.88 109.696-113.024 117.184-197.184 1.088-12.928-0.256-26.24-13.76-32.96z m-681.408 757.76c-116.928-92.096-173.696-122.368-197.12-120.96-21.888 1.152-17.984 26.304-13.184 42.624 5.12 16.128 11.648 27.328 20.8 41.408 6.464 9.408 10.752 23.424-6.272 33.92-37.76 23.424-103.232-7.872-106.24-9.472-76.288-44.8-140.032-104.192-184.96-185.344-43.264-78.08-68.48-161.92-72.576-251.328-1.152-21.632 5.184-29.312 26.688-33.152a265.6 265.6 0 0 1 85.696-2.24c119.296 17.472 220.928 71.04 306.048 155.52 48.768 48.32 85.504 105.92 123.392 162.176 40.256 59.776 83.648 116.672 138.88 163.392 19.392 16.32 35.072 28.8 49.92 37.952-44.928 5.056-119.872 6.08-171.008-34.496z m56.064-361.024a17.152 17.152 0 1 1 2.752 9.6 16.896 16.896 0 0 1-2.752-9.664z m174.08 89.472a102.72 102.72 0 0 1-33.024 8.96 70.528 70.528 0 0 1-44.736-14.272c-15.296-12.8-26.176-19.968-30.848-42.496a99.264 99.264 0 0 1 0.832-32.96c4.032-18.368-0.384-30.08-13.248-40.768-10.624-8.768-23.872-11.072-38.592-11.072a31.168 31.168 0 0 1-14.272-4.416c-6.144-3.072-11.136-10.752-6.336-20.16 1.536-3.008 8.96-10.304 10.752-11.712 19.84-11.328 42.88-7.68 64.192 0.896 19.712 8.064 34.56 22.848 56 43.776 21.952 25.28 25.792 32.384 38.4 51.328 9.856 14.848 18.816 30.208 24.96 47.616 3.776 10.88-1.152 19.776-14.08 25.28z"></path> |
| | | </svg> |
| | | </span> |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | |
| | | sqlList = [] |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { visible, sqlList, status, successIds, errorIds, execId, errorMsg } = this.state |
| | | const { visible, status, columns, sqlList } = this.state |
| | | |
| | | return ( |
| | | <> |
| | | <Button className="mk-border-yellow" icon="bug" onClick={this.trigger}>调试</Button> |
| | | <Drawer |
| | | <Button className="mk-border-yellow" icon="bug" onClick={this.trigger}>DeepSeek调试</Button> |
| | | <Modal |
| | | className="debug-modal" |
| | | width={600} |
| | | title="DeepSeek调试" |
| | | width="60vw" |
| | | visible={visible} |
| | | closable={false} |
| | | placement="left" |
| | | centered={true} |
| | | footer={null} |
| | | destroyOnClose |
| | | > |
| | | <div className="mk-sql-wrap"> |
| | | <div className="body"> |
| | | {sqlList.map(item => { |
| | | let other = '' |
| | | if (item.supName) { |
| | | other = `上级:${item.supName}-${item.tabName}` |
| | | } |
| | | |
| | | let status = <ClockCircleOutlined /> |
| | | |
| | | if (successIds.includes(item.uuid)) { |
| | | status = <CheckCircleOutlined /> |
| | | } else if (errorIds.includes(item.uuid)) { |
| | | if (errorMsg[item.uuid]) { |
| | | status = <Tooltip placement="topLeft" title={errorMsg[item.uuid]}> |
| | | <CloseCircleOutlined /> |
| | | </Tooltip> |
| | | } else { |
| | | status = <CloseCircleOutlined /> |
| | | } |
| | | } else if (item.uuid === execId) { |
| | | status = <LoadingOutlined /> |
| | | } |
| | | |
| | | return <div className="sql-item" key={item.uuid}> |
| | | <div className="sql-1" title={item.name}><div>{item.name}</div></div> |
| | | <div className="sql-2" title={item.label}><div>{item.label}</div></div> |
| | | <div className="sql-3" title={other}><div>{other}</div></div> |
| | | <div className="sql-4">{status}</div> |
| | | </div> |
| | | })} |
| | | </div> |
| | | <div className="mk-sql-wrap mk-scrollbar"> |
| | | <Table |
| | | bordered |
| | | rowKey="uuid" |
| | | dataSource={sqlList} |
| | | columns={columns} |
| | | pagination={false} |
| | | /> |
| | | </div> |
| | | <div className="mk-footer"> |
| | | {status === 'error' ? <Button key="skip" className="mk-border-green" onClick={this.roopSql}> |
| | |
| | | 关闭 |
| | | </Button> |
| | | </div> |
| | | </Drawer> |
| | | </Modal> |
| | | </> |
| | | ) |
| | | } |