Skip to content

A
amos-convertor-view
Commit cae45b51 authored by 单奇雲's avatar 单奇雲
Browse files
Options

新增文本预案pdf 查看 下载 分享功能

parent d54c4d65
Hide whitespace changes
Inline Side-by-side
Showing with 486 additions and 50 deletions
src/consts/urlConsts.js
View file @ cae45b51
......@@ -215,6 +215,7 @@ export const FasSerUrl = {
fileDownloadDocs: completePrefix(baseURI, 'file/download'),//查看文档
lookHtmlTextNavData: completePrefix(baseURI, 'file/lookHtmlTextNav'), //文档转换为html,带导航
getTextPlanUrl: completePrefix(baseURI, 'api/visual/plan/text/{id}'),//获取文字预案信息
textPlanDownloadFile: completePrefix(baseURI, 'api/visual/plan/text/downloadFile/{id}'),//下载文件
uploadTextPlan: completePrefix(baseURI, 'file/plan/{appId}/texts'),
getTreeNodeTypeUrl: completePrefix(baseURI, 'api/riskModel/riskSource/getChildTypeByPid?riskSourceId={riskSourceId}'),// 根据节点ID获取子节点可能的类型
getAllUserUrl: completePrefix(baseURI, 'api/common/user/list')//获取所有用户
......
src/routes/index.js
View file @ cae45b51
......@@ -18,6 +18,8 @@ import pageCompontent, {
} from './view';
import Iot3DGraphBiz from './../view/planMgmt/iot3DGraph';
import ShareTextPlan from './../view/planMgmt/view/ShareTextPlan';
const groups = [
'main', 'biz', 'console', 'ruleConfig'
......@@ -36,6 +38,7 @@ const injectRoutes = menus => {
{ path: 'login', component: Login },
{ path: 'autologin', component: AutoLogin },
{ path: 'region', component: RegionList }, // 区域选择
{ path: 'shareTextPlan', component: ShareTextPlan },
...signUp,
{
path: 'main',
......
src/services/preControlService.js
View file @ cae45b51
......@@ -178,6 +178,13 @@ export const getTextPlanAction = (id) => {
return commonGet(url);
};
/**
* 下载文本预案文件
*/
export const textPlanDownloadFileAction = (id) => {
return commonGet(formatUrl(FasSerUrl.textPlanDownloadFile,{ id }));
};
export const queryAllUserAction = () => {
return commonGet(FasSerUrl.getAllUserUrl);
};
......
src/styles/view/biz/riskModel/riskModel.scss
View file @ cae45b51
......@@ -194,6 +194,12 @@
margin-left: 0 !important;
}
.share-model-button {
position: absolute;
right: 10px;
top: 67px;
}
.equip-model {
.equip-model-equip {
width: 33%;
......
src/styles/view/planMgmt/plan.scss
View file @ cae45b51
......@@ -2,35 +2,41 @@
width: 100%;
height: 100%;
.publish-view-header {
position: absolute;
z-index: 1;
.publish-view-content{
width: 100%;
height: 40px;
font-size: 16px;
line-height: 34.5px;
background-color: rgba(243, 243, 243, 1);
border-color: rgba(201, 201, 201, 1);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
height: 100%;
.amos-btn {
padding: 0 0.5em;
.publish-view-header {
position: absolute;
z-index: 1;
width: 100%;
height: 40px;
font-size: 16px;
line-height: 34.5px;
background-color: rgba(243, 243, 243, 1);
border-color: rgba(201, 201, 201, 1);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
.amos-btn {
padding: 0 0.5em;
}
}
.plan-drill-root {
width: 100%;
height: 100%;
}
.text-plan-root {
width: calc(100% - 168px);
height: 100%;
padding-top: 40px;
margin-left: 168px;
}
}
.plan-drill-root {
width: 100%;
height: 100%;
}
.text-plan-root {
width: calc(100% - 168px);
height: 100%;
padding-top: 40px;
margin-left: 168px;
}
}
.publish-view-side {
......
src/styles/view/planMgmt/text.scss
View file @ cae45b51
......@@ -145,3 +145,147 @@
}
}
}
.share-plan-view {
height: 100%;
display: flex;
position: relative;
.plan-view-left {
width: 20%;
height: 100%;
border-right: 1px solid #7c8287;
overflow: auto;
padding-right: 5px;
}
.plan-view-right {
width: 80%;
height: 100%;
overflow: auto;
}
.plan-nav {
height: 100%;
width: 30%;
padding-top: 0.17rem;
padding-left: 0.2rem;
display: inline-block;
vertical-align: top;
max-width: 4.02rem;
.nav-content {
height: calc(100% - 0.38rem);
padding: 0.15rem 0.1rem 0.1rem 0.3rem;
.nav-item {
height: 1.06rem;
margin-bottom: 10px;
cursor: pointer;
display: flex;
background: url(/src/assets/common/disaster/disaster-item.png) no-repeat;
background-size: 100% 100%;
.plan-item {
width: 1rem;
padding: 0.1rem;
padding-left: 0.2rem;
.nav-item-img {
width: 100%;
height: 100%;
}
}
.plan-info {
flex: 1;
display: flex;
flex-direction: column;
.plan-name {
height: 41%;
font-size: 0.20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.plan-object {
height: 27%;
font-size: 0.16rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: flex-start;
> span {
color: #eed92a;
margin-right: 4px;
}
}
.plan-time {
height: 27%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 0.16rem;
align-items: flex-start;
> span {
color: #eed92a;
margin-right: 4px;
}
}
}
}
.nav-item-active {
background: url(/src/assets/common/disaster/disaster-active.png) no-repeat;
background-size: 100% 100%;
}
}
}
.plan-detail {
height: 100%;
display: inline-block;
padding-top: 0.17rem;
flex: 1;
padding-right: 0.5rem;
padding-left: 0.2rem;
.detail-content {
height: calc(100% - 0.5rem);
background: transparent;
padding-top: 0.11rem;
iframe {
&::-webkit-scrollbar {
width: 6px;
height: 16px;
background-color: transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
&::-webkit-scrollbar-thumb {
height: 20px;
background-color: rgba(40, 70, 140, 0.9);
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
}
}
}
}
src/view/planMgmt/treeView/PlanTreeView.js
View file @ cae45b51
import React, { Component } from 'react';
import { Tree } from 'amos-framework';
import { Tree, Button} from 'amos-framework';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getPlanTreeAction } from './../../../services/preControlService';
......@@ -20,6 +20,8 @@ class PlanTreeView extends Component {
componentDidMount() {
this.getPlanTree();
let viewSideDiv = document.getElementsByClassName('aaa')[0];
viewSideDiv && viewSideDiv.addEventListener('click', this.props.onRightCancel);
}
componentWillReceiveProps(nextProps) {
......@@ -109,6 +111,7 @@ class PlanTreeView extends Component {
return data;
}
renderTreeNodes = (data) => {
let { activeKey } = this.props;
let filterData = Object.assign([], data);
......@@ -129,9 +132,9 @@ class PlanTreeView extends Component {
render() {
let { expandedKeys, selectedKeys, treeData,autoExpandParent } = this.state;
let { activeKey } = this.props;
let { activeKey, onRightClick } = this.props;
return (
<div >
<div className='aaa'>
<Tree
showIcon
expandedKeys={expandedKeys}
......@@ -139,10 +142,12 @@ class PlanTreeView extends Component {
selectedKeys={selectedKeys}
autoExpandParent={autoExpandParent}
onSelect={this.onTreeItemSelect}
onRightClick={onRightClick}
className={classnames('plan-drill-tree', activeKey)}
>
{this.renderTreeNodes(treeData)}
</Tree>
</div>);
}
}
......
src/view/planMgmt/view/ShareTextPlan.js 0 → 100644
View file @ cae45b51
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tree } from 'amos-framework';
import { FasSerUrl } from './../../../consts/urlConsts';
import { LocationParam } from 'amos-tool';
import { lookHtmlTextNavData, getTextPlanAction } from './../../../services/preControlService';
const TreeNode = Tree.TreeNode;
/**
* 文字预案 分享
*
* @class ShareTextPlan
* @extends {Component}
*/
class ShareTextPlan extends Component {
constructor(props) {
super(props);
this.state = {
docUrl: '',
textId: 1,
navNode: []
};
}
componentWillMount() {
let appId = LocationParam.getLocationParamByName('appId');
appId && this.getShareTextPlanView(appId);
}
onSelect = (selectedKeys, info) => {
let { docUrl } = this.state;
docUrl = docUrl.split('#')[0];
if(docUrl.endsWith(".html")){
docUrl = docUrl + '#' + selectedKeys[0];
}else if(docUrl.endsWith(".pdf")){
docUrl = docUrl + '#' + info.node.props.pageInfo;
}
info && this.setState({docUrl});
console.log('selected', selectedKeys, info);
}
getShareTextPlanView = (textId) => {
textId && getTextPlanAction(textId).then(data => {
if (data && data.filePath) {
let file = data.filePath;
let params = { file };
this.lookHtmlText(params);
} else {
this.setState({ navNode: [], docUrl: '' });
}
});
}
getNode = (navNode) => {
return navNode.map(item => {
if (item.children.length > 0) {
return (
<TreeNode title={item.text} key={item.id} pageInfo={item.pageInfo}>
{this.getNode(item.children)}
</TreeNode>
);
}
return <TreeNode title={item.text} key={item.id} pageInfo={item.pageInfo}/>;
});
}
// word转html
lookHtmlText = (params) => {
lookHtmlTextNavData(params).then(data => {
this.setState({
docUrl: FasSerUrl.fileDownloadDocs + data.html,
navNode: data.nodes
});
});
}
render() {
let { docUrl, navNode } = this.state;
return docUrl !== '' && (
<div className='share-plan-view'>
<div className="plan-view-left">
<Tree className="draggable-tree" defaultExpandedKeys={['1']} onSelect={this.onSelect} style={{ width: '100%', height: '100%' }}>
{ navNode && this.getNode(navNode) }
</Tree>
</div>
<div className="plan-view-right">
<iframe title={docUrl} key={docUrl} src={docUrl ? docUrl : ''} width='100%' height='99%' frameBorder='0' scrolling='yes' />
</div>
</div>
);
}
}
ShareTextPlan.propTypes = {
};
export default ShareTextPlan;
src/view/planMgmt/view/TextPlan.js
View file @ cae45b51
......@@ -38,10 +38,12 @@ class TextPlan extends Component {
onSelect = (selectedKeys, info) => {
let { docUrl } = this.state;
docUrl = docUrl.split('#')[0];
info && this.setState({
docUrl: docUrl + '#' + selectedKeys[0]
});
if(docUrl.endsWith(".html")){
docUrl = docUrl + '#' + selectedKeys[0];
}else if(docUrl.endsWith(".pdf")){
docUrl = docUrl + '#' + info.node.props.pageInfo;
}
info && this.setState({docUrl});
console.log('selected', selectedKeys, info);
}
......@@ -63,12 +65,12 @@ class TextPlan extends Component {
if (item.children.length > 0) {
return (
<TreeNode title={item.text} key={item.id} >
<TreeNode title={item.text} key={item.id} pageInfo={item.pageInfo}>
{this.getNode(item.children)}
</TreeNode>
);
}
return <TreeNode title={item.text} key={item.id} />;
return <TreeNode title={item.text} key={item.id} pageInfo={item.pageInfo}/>;
});
}
......
src/view/planMgmt/view/index.js
View file @ cae45b51
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { browserHistory } from 'amos-react-router';
import { SidePane } from 'amos-framework';
import { SidePane, Button, Modal, message } from 'amos-framework';
import { headerButton, pageUrl } from './../common/conf';
import PlanTreeView from './../treeView/PlanTreeView';
import TextButton from './../common/TextButton';
import BizIcon from './../../common/icon/BizIcon';
import { textPlanDownloadFileAction } from './../../../services/preControlService';
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import { FasSerUrl } from 'CONSTS/urlConsts';
import _amosTool from 'amos-tool';
const sidePaneStyle = {
planDrill: {
......@@ -44,7 +50,10 @@ class PublishView extends Component {
activeKey: 'planDrill',
params: {},
visible: true,
animateDelay: 0
animateDelay: 0,
rightClickNodeTreeItem: null,
node: {},
shareVisible: false
};
}
......@@ -52,6 +61,29 @@ class PublishView extends Component {
// this.setState({ params: this.props.location.state });
}
componentDidMount(){
let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
window.addEventListener('resize', this._resize);
}
componentWillUnmount(){
let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
window.addEventListener('resize', this._resize);
}
_handleClick = (event) => {
console.log("_handleClick")
this.setState({ rightClickNodeTreeItem: null });
}
_resize =()=>{
this.onscroll();
}
onscroll =(e)=>{
const { rightClickNodeTreeItem } = this.state;
rightClickNodeTreeItem ? this.setState({ rightClickNodeTreeItem: null }) : '';
}
onTreeSelect = (param) => {
let { params = {}, activeKey } = this.state;
params.appId = param.id;
......@@ -60,7 +92,7 @@ class PublishView extends Component {
}
getSidePaneContent = (activeKey) => {
return <PlanTreeView activeKey={activeKey} onTreeSelect={this.onTreeSelect} />;
return <PlanTreeView activeKey={activeKey} onTreeSelect={this.onTreeSelect} onRightClick={this.onRightClick} onRightCancel={this._handleClick}/>;
}
handleChange = (activeKey) => {
......@@ -106,28 +138,158 @@ class PublishView extends Component {
});
}
}
/////////////////////////////////////////////////////
// tree列表上右键事件
onRightClick = e => {
let { activeKey } = this.state;
if( activeKey === 'textPlan'){//文本预案添加发布，导出功能
console.log("asdfasdfasdf")
this.setState({
rightClickNodeTreeItem: {
pageX: e.event.pageX,
pageY: e.event.pageY
}, node: e.node.props });
}
}
//树按钮点击事件
onButtonClick = (value) => {
const { id } = this.state.node;
console.log(id,"treeId")
if (value === '1') {
let a = document.createElement('a');
fetch(formatUrl(FasSerUrl.textPlanDownloadFile,{ id }), {
method: 'get',
}).then(e => {
if(e.status !== 404){
a.href = formatUrl(FasSerUrl.textPlanDownloadFile,{ id });
a.click();
}else{
message.danger("导出错误，文件不存在！")
}
});
} else if (value === '2') {
this.setState({ shareVisible: true });
}
this.setState({ rightClickNodeTreeItem: null });
}
getNodeTreeRightClickMenu = () => {
let { pageX, pageY } = { ...this.state.rightClickNodeTreeItem };
const height = document.body.offsetHeight;
let overHeight = height - (pageY + 120);
overHeight > 0 ? '' : pageY = height - 120;
const tmpStyle = {
position: 'absolute',
left: `${pageX}px`,
top: `${pageY - 45}px`,
backgroundColor: '#ffffff',
border: 'solid',
height: '70px',
borderWidth: '1px',
borderColor: '#c9c9c9',
zIndex: '9999'
};
const menu = (
<div style={tmpStyle}>
<Button icon={<BizIcon icon="daochu" />} type="button" onClick={()=>this.onButtonClick('1')} className='risk-model-button' transparent>导出</Button>
<Button icon={<BizIcon icon="fenxiang" />} onClick={()=>this.onButtonClick('2')} className='risk-model-button' transparent>分享</Button>
</div>
);
return this.state.rightClickNodeTreeItem ? menu : '';
};
getShareContent =()=>{
const { id } = this.state.node;
let shareUrl = location.origin + "/shareTextPlan?appId=" + id;
return (
<div>
<a id="url" href={shareUrl} target="view_window">{shareUrl}</a>
<Button icon={<BizIcon icon="lianjie" />}
onClick={()=>this.onShareCopyClick()} className='share-model-button' transparent>复制</Button>
</div>
);
}
onShareCopyClick = () =>{
//获取input对象
var obj = document.getElementById("url");
// 获取元素内容是否可编辑和是否只读
var editable = obj.contentEditable;
var readOnly = obj.readOnly;
// 将对象变成可编辑的
obj.contentEditable = true;
obj.readOnly = false;
// 创建一个Range对象，Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域
var range = document.createRange();
//获取obj的内容作为选中的范围
range.selectNodeContents(obj);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
//恢复原来的状态
obj.contentEditable = editable;
obj.readOnly = readOnly;
try{
//进行复制到剪切板
if(document.execCommand("Copy","false",null)){
//如果复制成功
message.success("复制成功！");
}else{
//如果复制失败
message.danger("复制失败！");
}
window.getSelection().removeAllRanges();
}catch(err){
//如果报错
message.danger("复制错误！")
window.getSelection().removeAllRanges();
}
}
cancel = () => {
this.setState({
shareVisible: false
});
}
////////////////////////////////////////////
render() {
const { activeKey,visible,animateDelay } = this.state;
const { activeKey,visible,animateDelay,shareVisible } = this.state;
const animateProps = {
transitionAppear: true
};
return (
<div className='publish-view-root'>
<div className='publish-view-header'>
{this.renderButton(activeKey)}
<div className='publish-view-content'>
<div className='publish-view-header'>
{this.renderButton(activeKey)}
</div>
<SidePane
className='publish-view-side'
animateName="fade-left"
animateProps={animateProps}
animateDelay={animateDelay}
visible={visible}
{...sidePaneStyle[activeKey]}
>
{activeKey && this.getSidePaneContent(activeKey)}
</SidePane>
{this.props.children}
</div>
<SidePane
className='publish-view-side'
animateName="fade-left"
animateProps={animateProps}
animateDelay={animateDelay}
visible={visible}
{...sidePaneStyle[activeKey]}
>
{activeKey && this.getSidePaneContent(activeKey)}
</SidePane>
{this.props.children}
{this.getNodeTreeRightClickMenu()}
<Modal
header="链接分享"
visible={shareVisible}
destroyContent
// onOk={this.onOk}
onCancel={this.cancel}
content={visible && this.getShareContent()}
noDefaultFooter
/>
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment