Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 1a6cab35 by liuyong
Options

修改bug

1 parent 9a13989a
Inline Side-by-side
Showing with 2551 additions and 244 deletions
package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
}, },
"dependencies": { "dependencies": {
"@onlyoffice/document-editor-vue": "^1.3.0", "@onlyoffice/document-editor-vue": "^1.3.0",
"@wangeditor/editor-for-vue": "^1.0.2",
"axios": "^1.6.2", "axios": "^1.6.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
......
src/api/index.js
...@@ -551,4 +551,8 @@ export function addSystemTable(params) { ...@@ -551,4 +551,8 @@ export function addSystemTable(params) {
export function editSystemTable(params) { export function editSystemTable(params) {
return post('/network/arc-ast-sys/upd', params); return post('/network/arc-ast-sys/upd', params);
} }
// 系统资产架构，维护资产要素保存
export function systemArchiSaveFactor(params) {
return post('/network/arc-ast-sys/extend', params);
}
src/router/index.js
...@@ -176,10 +176,35 @@ const routes = [ ...@@ -176,10 +176,35 @@ const routes = [
component: () => import('@/views/systemArchiViewDesign/index.vue'), component: () => import('@/views/systemArchiViewDesign/index.vue'),
}, },
{ {
path: '/main/systemArchiViewDesignDetails',//系统架构视图设计详情
name: 'systemArchiViewDesignDetails',
component: () => import('@/views/systemArchiViewDesign/details.vue'),
},
{
path: '/main/documentEdit',//文档编辑 path: '/main/documentEdit',//文档编辑
name: 'documentEdit', name: 'documentEdit',
component: () => import('@/views/documentEdit/index.vue'), component: () => import('@/views/documentEdit/index.vue'),
}, },
{
path: '/main/summaryArchiDesign',//概设阶段视图设计
name: 'summaryArchiDesign',
component: () => import('@/views/summaryArchiDesign/index.vue'),
},
{
path: '/main/summaryArchiDesignDetails',//概设阶段视图设计详情
name: 'summaryArchiDesignDetails',
component: () => import('@/views/summaryArchiDesign/details.vue'),
},
{
path: '/main/otherArchiDesign',//其他视图设计
name: 'otherArchiDesign',
component: () => import('@/views/otherArchiDesign/index.vue'),
},
{
path: '/main/otherArchiDesignDetails',//其他视图设计详情
name: 'otherArchiDesignDetails',
component: () => import('@/views/otherArchiDesign/details.vue'),
},
] ]
} }
] ]
......
src/views/Main/index.vue
...@@ -154,11 +154,11 @@ ...@@ -154,11 +154,11 @@
<span style="margin-left: 5px;">概设阶段架构设计</span> <span style="margin-left: 5px;">概设阶段架构设计</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '概设阶段架构设计', '概设阶段架构设计')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">概设阶段架构设计</span> <span style="margin-left: 5px;">概设阶段架构设计</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '概设阶段架构设计', '其他视图设计')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">其他视图设计</span> <span style="margin-left: 5px;">其他视图设计</span>
</div> </div>
...@@ -541,6 +541,14 @@ ...@@ -541,6 +541,14 @@
this.$router.push( '/main/comCenterServeList', () => {}, () => {} ); this.$router.push( '/main/comCenterServeList', () => {}, () => {} );
this.visible1 = false; this.visible1 = false;
break; break;
case '概设阶段架构设计':
this.$router.push( '/main/summaryArchiDesign', () => {}, () => {} );
this.visible2 = false;
break;
case '其他视图设计':
this.$router.push( '/main/otherArchiDesign', () => {}, () => {} );
this.visible2 = false;
break;
} }
} }
} }
......
src/views/archi-asset-manage/index.vue
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-table height="400" v-loading="loading" :data="tableData2" @selection-change="select_table_rows2" stripe border> <el-table height="400" v-loading="loading2" :data="tableData2" @selection-change="select_table_rows2" stripe border>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column> <el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
...@@ -301,7 +301,7 @@ ...@@ -301,7 +301,7 @@
</div> </div>
<div style="margin: 15px 0;"></div> <div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="item.checkedCities" @change="value => handleCheckedCitiesChange(value, item)" style="overflow-x: auto;display: flex;"> <el-checkbox-group v-model="item.checkedCities" @change="value => handleCheckedCitiesChange(value, item)" style="overflow-x: auto;display: flex;">
<el-checkbox v-for="city in item.subList" :label="city.assetName" :key="city.assetId">{{ city.assetName }}</el-checkbox> <el-checkbox v-for="city in item.subList" :label="city.assetId" :key="city.assetId">{{ city.assetName }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-card> </el-card>
</div> </div>
...@@ -325,7 +325,8 @@ ...@@ -325,7 +325,8 @@
deleteSystemTable, deleteSystemTable,
addSystemTable, addSystemTable,
editSystemTable, editSystemTable,
archiIntelligenceSearchTree archiIntelligenceSearchTree,
systemArchiSaveFactor
} from '@/api/index.js'; } from '@/api/index.js';
import $ from 'jquery'; import $ from 'jquery';
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
...@@ -498,8 +499,8 @@ ...@@ -498,8 +499,8 @@
}, },
get_table() {//查询表格数据 get_table() {//查询表格数据
const params = { const params = {
// "archiAssetState": this.searchParams.archiAssetState, "archiAssetState": this.searchParams.archiAssetState,
// "archiStage": this.searchParams.archiStage, "archiStage": this.searchParams.archiStage,
"assetName": this.searchParams.let1, "assetName": this.searchParams.let1,
"createMan": this.searchParams.let3, "createMan": this.searchParams.let3,
"archiEleId": this.searchParams.let2, "archiEleId": this.searchParams.let2,
...@@ -686,8 +687,8 @@ ...@@ -686,8 +687,8 @@
handleCheckAllChange(val, item) { handleCheckAllChange(val, item) {
let cityOptions = []; let cityOptions = [];
if(val){ if(val){
item.subList.forEach(item => { item.subList.forEach(item2 => {
cityOptions.push(item.assetName) cityOptions.push(item2.assetId);
}); });
}else { }else {
cityOptions = []; cityOptions = [];
...@@ -696,16 +697,13 @@ ...@@ -696,16 +697,13 @@
item.isIndeterminate = false; item.isIndeterminate = false;
}, },
handleCheckedCitiesChange(value, item) { handleCheckedCitiesChange(value, item) {
console.log(value)
console.log(item)
let checkedCount = value.length; let checkedCount = value.length;
item.checkAll = checkedCount === item.subList.length; item.checkAll = checkedCount === item.subList.length;
item.isIndeterminate = checkedCount > 0 && checkedCount < item.subList.length; item.isIndeterminate = checkedCount > 0 && checkedCount < item.subList.length;
}, },
getElementTreeData(type) {//查询左侧树 getElementTreeData(type) {//查询选择遵从总体架构资产类型数据
archiIntelligenceSearchTree({}).then(res => { archiIntelligenceSearchTree({}).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log(res.data);
res.data.map(item => { res.data.map(item => {
item['isIndeterminate'] = false; item['isIndeterminate'] = false;
item['checkAll'] = false; item['checkAll'] = false;
...@@ -798,7 +796,33 @@ ...@@ -798,7 +796,33 @@
} }
}, },
saveFactor() {//确定维护资产要素 saveFactor() {//确定维护资产要素
this.add_dialog4 = false; let extend = [];
this.elementTree.forEach(item => {
if(item.checkedCities.length > 0) {
extend.push({
assetConstant: item.archiType,
assetIdList: item.checkedCities
})
}
})
const params = {
extend
}
systemArchiSaveFactor(params).then(res => {
if(res.code == 200) {
this.add_dialog4 = false;
this.get_table();
Message({
type: 'success',
message: '保存成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}, },
saveDialog(){//保存架构 saveDialog(){//保存架构
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
...@@ -934,7 +958,6 @@ ...@@ -934,7 +958,6 @@
this.showSelectTitle.appId = this.selectRow2[0].appId; this.showSelectTitle.appId = this.selectRow2[0].appId;
this.showSelectTitle.appCode = this.selectRow2[0].appCode; this.showSelectTitle.appCode = this.selectRow2[0].appCode;
this.showSelectTitle.appName = this.selectRow2[0].appName; this.showSelectTitle.appName = this.selectRow2[0].appName;
}, },
cancelSelectSystem() {//取消选择系统 cancelSelectSystem() {//取消选择系统
this.add_dialog1 = false; this.add_dialog1 = false;
......
src/views/archi-view-manage/index.vue
...@@ -493,7 +493,7 @@ export default { ...@@ -493,7 +493,7 @@ export default {
}, },
getData() {//获取树节点内容 getData() {//获取树节点内容
const params = { const params = {
archiStage: 1
} }
getArchiViewManage(params).then(res => { getArchiViewManage(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
......
src/views/documentEdit/index.vue
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
:props="{ children: 'children', label: 'docTitle', id: 'docTitleId' }" :props="{ children: 'children', label: 'docTitle', id: 'docTitleId' }"
default-expand-all default-expand-all
node-key="docTitleId" node-key="docTitleId"
:expand-on-click-node="false"
@node-click="treeClick" @node-click="treeClick"
ref="tree"> ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
...@@ -44,7 +45,7 @@ ...@@ -44,7 +45,7 @@
<el-form-item label="章节说明:" prop="let2"> <el-form-item label="章节说明:" prop="let2">
<el-input v-no-backslash v-model="ruleForm.let2" type="textarea" :rows="5" maxlength="1000" show-word-limit></el-input> <el-input v-no-backslash v-model="ruleForm.let2" type="textarea" :rows="5" maxlength="1000" show-word-limit></el-input>
</el-form-item> </el-form-item>
<el-form-item label="参考规范:"> <!-- <el-form-item label="参考规范:">
<el-button type="text" icon="el-icon-plus">添加</el-button> <el-button type="text" icon="el-icon-plus">添加</el-button>
</el-form-item> </el-form-item>
<el-form-item label="引用章节:"> <el-form-item label="引用章节:">
...@@ -61,9 +62,26 @@ ...@@ -61,9 +62,26 @@
<el-radio label="是"></el-radio> <el-radio label="是"></el-radio>
<el-radio label="否"></el-radio> <el-radio label="否"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item> -->
<el-form-item label="正文内容:" prop="let5"> <!-- <el-form-item label="正文内容:" prop="let5">
<el-input v-no-backslash v-model="ruleForm.let5" type="textarea" :rows="5" maxlength="5000" show-word-limit></el-input> <el-input v-no-backslash v-model="ruleForm.let5" type="textarea" :rows="5" maxlength="5000" show-word-limit></el-input>
</el-form-item> -->
<el-form-item label="正文内容:">
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="editorHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
...@@ -98,10 +116,14 @@ import { ...@@ -98,10 +116,14 @@ import {
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import $ from 'jquery'; import $ from 'jquery';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default { export default {
name: 'documentEdit', name: 'documentEdit',
components: { components: {
Editor,
Toolbar
}, },
data() { data() {
return { return {
...@@ -132,12 +154,24 @@ export default { ...@@ -132,12 +154,24 @@ export default {
}, },
addOrEditInfo: {}, addOrEditInfo: {},
leftInfo: {}, leftInfo: {},
editor: null,
editorHtml: '<div></div>',
toolbarConfig: { },
editorConfig: { placeholder: '请输入内容...' },
mode: 'default', // or 'simple
}; };
}, },
beforeDestroy() {
if(this.editor == null) return;
this.editor.destroy(); // 组件销毁时，及时销毁编辑器
},
mounted(){ mounted(){
this.getDocCatalog(); this.getDocCatalog();
}, },
methods: { methods: {
onCreated(editor) {// 一定要用 Object.seal() ，否则会报错
this.editor = Object.seal(editor);
},
handleCommand(type, data) {//目录树的操作 handleCommand(type, data) {//目录树的操作
console.log(typeof type) console.log(typeof type)
console.log(data) console.log(data)
...@@ -383,6 +417,7 @@ export default { ...@@ -383,6 +417,7 @@ export default {
this.ruleForm.let1 = res.data.docTitle; this.ruleForm.let1 = res.data.docTitle;
this.ruleForm.let2 = res.data.paraExplain; this.ruleForm.let2 = res.data.paraExplain;
this.ruleForm.let5 = res.data.docContent; this.ruleForm.let5 = res.data.docContent;
this.editorHtml = res.data.docContent ? '<div>' + res.data.docContent + '</div>' : '<div></div>';
} }
}) })
}, },
......
src/views/otherArchiDesign/details.vue 0 → 100644
<template>
<div class="otherArchiDesignDetails">
<template>
<el-button type="text" class="saveFileBtn" @click="saveFile">保存</el-button>
</template>
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<Drawio :initGraphId="routerId"></Drawio>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import {
saveArchiViewManageCardDetails
} from '@/api/index.js';
export default {
name: 'otherArchiDesignDetails',
components: {
Drawio,
},
data() {
return {
routerId: null,
};
},
mounted(){
const id = this.$route.query.id;
const graphGroup = this.$route.query.info;
this.routerId = {
id: id,
info: graphGroup
};
window.onmessage = e => {
if(e.data.type == 'saveFileSignalXml') {
MessageBox.confirm('确定保存文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
viewDetailsId: id,
metaModelData: e.data.data.mxGraphModel,
metaModelSvg: e.data.data.base64SvgToString
}
saveArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '保存成功!',
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
}
}
},
methods: {
saveFile() {
document.getElementById("drawioGraph").contentWindow.postMessage({ type: 'saveFileSignal' } , '*');
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.el-button--text{
color: #0D867F;
}
.saveFileBtn{
position: absolute;
right: 200px;
top: 0px;
z-index: 9;
color: #0D867F;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
width: 100%;
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
.divider1{
width: 6px;
margin-right: 6px;
background-color: #0D867F;
}
.divider2{
margin-left: 6px;
width: 74%;
}
.left_graph_container{
width: 100%;
height: 100%;
}
.right_graph_container{
width: 265px;
height: 100%;
position: absolute;
right: -15%;
top: 0;
background-color: rgba(256, 256, 256, 1);
}
.otherArchiDesignDetails{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.tu_biao_icon{
max-width: 80px;
max-height: 40px;
cursor: pointer;
}
</style>
src/views/otherArchiDesign/index.vue 0 → 100644
<template>
<div class="otherArchiDesign">
<el-card class="box-card" style="margin-bottom: 10px;">
<div style="text-align: left;display: flex;align-items: center;">
<el-button type="primary" size="medium" @click="operation('open_add_dialog1', null)">选择系统</el-button>
<div style="margin-left: 20px;margin-right: 20px;" v-if="showSelectTitle.title">您已选择：{{ showSelectTitle.title }}</div>
</div>
</el-card>
<div class="systemArchiViewDesignContainer">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
node-key="viewId"
default-expand-all
@node-click="treeClick"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:current-node-key="currentNodekey"
ref="tree">
</el-tree>
<div class="right_container">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in cardData" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div> -->
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="add_dialog2 = true">
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
</div>
<el-dialog
title='选择系统'
:visible.sync="add_dialog1"
:center="false"
:close-on-click-modal="false"
width="80%">
<div class="search_menu" style="justify-content: center;margin-bottom: 20px;">
<div class="search_menu_item_container">
<div class="search_menu_item" style="width: auto;">
<span class="search_title">单位</span>
<el-input v-no-backslash v-model="searchParams2.let1" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">部门</span>
<el-input v-no-backslash v-model="searchParams2.let2" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">系统名称</span>
<el-input v-no-backslash v-model="searchParams2.let3" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">建设类型</span>
<el-select v-model="searchParams2.let4" placeholder="请选择" class="search_item">
<el-option v-for="item in jianSheLeiXingSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table2">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn" @click="reset2">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<el-table height="400" v-loading="loading2" :data="tableData2" @selection-change="select_table_rows2" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
<el-table-column prop="manageDeptId" label="部门" align="center"></el-table-column>
<el-table-column prop="appName" label="系统名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="建设类型" align="center">
<template slot-scope="scope">
<span v-if="scope.row.buildType == 1">统推</span>
<span v-else>自建</span>
</template>
</el-table-column>
<el-table-column prop="buildOrg" label="承建单位" align="center"></el-table-column>
<el-table-column prop="projectManager" label="项目经理" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
</el-table>
<el-pagination
background
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"
:current-page="pager2.current"
:page-sizes="pager2.sizes"
:page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager2.total">
</el-pagination>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="dialogOperation('selectSystem', null)">确定</el-button>
<el-button @click="add_dialog1 = false">取消</el-button>
</span>
</el-dialog>
<el-dialog
title="新建架构视图"
:visible.sync="add_dialog2"
:center="false"
width="40%">
<div class="add_dialog_content">
<el-form :model="ruleForm" :rules="rules" ref="form">
<el-form-item label="版本名称" prop="name" style="width: 100%;">
<el-input v-no-backslash v-model="ruleForm.name" maxlength="100" style="width: 600px;"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" v-debounce:click="ok">确定</el-button>
<el-button @click="add_dialog2 = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getArchiViewManage,
querysystemInfoManageTable,
getDianXingAnLiSelectData,
getArchiViewManageDetail,
addArchiViewManage,
queryArchiViewManageCardDetails,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'otherArchiDesign',
components: {
},
data() {
return {
treeData: [
{
viewId: 0,
viewName: '系统架构视图设计',
subList: []
}
],
currentNodekey: null,
showSelectTitle: {
title: null,
archiId: null,
},
add_dialog1: false,
searchParams2: {
let1: null,
let2: null,
let3: null,
let4: null,
},
tableData2: [],
loading2: false,
pager2: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
selectRow2: [],
jianSheLeiXingSelect: [],
cardData: [],
viewId: null,
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
add_dialog2: false,
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
},
graphGroup: null,
assetConstant: null,
};
},
mounted(){
this.getTreeData();
},
methods: {
operation(type, data) {
switch(type){
case 'open_add_dialog1':
this.open_add_dialog1();
break;
case 'open_add_dialog2':
// this.open_add_dialog2();
break;
}
},
dialogOperation(type, data) {
switch(type){
case 'selectSystem':
this.selectSystem();
break;
case 'cancelSelectSystem':
// this.cancelSelectSystem();
break;
}
},
selectSystem() {//确定选择系统
if(this.selectRow2.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据'
});
return;
}
if(this.selectRow2.length > 1) {
Message({
type: 'error',
message: '只能选择一条数据'
});
return;
}
this.add_dialog1 = false;
this.showSelectTitle.title = this.selectRow2[0].appName;
this.showSelectTitle.archiId = this.selectRow2[0].appId;
},
open_add_dialog1() {
this.add_dialog1 = true;
this.getJianSheLeiXingSelect().then(res => {
this.jianSheLeiXingSelect = res;
});
this.get_table2();
},
getJianSheLeiXingSelect() {//建设类型下拉
const params = {
key: "build_type"
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
})
},
select_table_rows2(data){//表格的勾选
this.selectRow2 = data;
},
search_table2() {//查询
this.pager2.current = 1;
this.get_table2();
},
reset2() {//重置
this.searchParams2.let1 = null;
this.searchParams2.let2 = null;
this.searchParams2.let3 = null;
this.searchParams2.let4 = null;
},
// 每页条数改变
handleSizeChange2(val) {
this.pager2.current = 1;
this.pager2.size = val;
this.get_table2();
},
//当前页码改变
handleCurrentChange2(val) {
this.pager2.current = val;
this.get_table2();
},
get_table2() {//查询表格数据
this.loading2 = true;
const params = {
"manageOrgId": this.searchParams2.let1,
"manageDeptId": this.searchParams2.let2,
"appName": this.searchParams2.let3,
"buildType": this.searchParams2.let4,
"current": this.pager2.current,
"pageSize": this.pager2.size,
};
querysystemInfoManageTable(params).then(res => {
if(res.code == 200) {
this.loading2 = false;
this.tableData2 = res.data.records;
this.pager2.current = res.data.current;
this.pager2.total = res.data.total;
this.pager2.size = res.data.size;
}
});
},
getTreeData() {//获取树节点内容
const params = {
archiStage: 4
}
getArchiViewManage(params).then(res => {
if(res.code == 200) {
this.graphGroup = res.data[0].viewId;
this.assetConstant = res.data[0].archiType;
this.treeData[0].subList = res.data;
this.currentNodekey = res.data[0].subList[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
this.viewId = res.data[0].subList[0].viewId;
this.pager.current = 1;
this.get_list();
}
})
},
treeClick(data, node, e) {//树点击的时候
if(!data.subList) {
// this.graphGroup = node.parent.data.viewId;
this.assetConstant = node.parent.data.archiType;
this.viewId = data.viewId;
this.pager.current = 1;
this.get_list();
}else {
this.viewId = null;
this.cardData = [];
this.pager.total = 0;
}
},
get_list(){//获取卡片数据
const params = {
current: this.pager.current,
pageSize: this.pager.size,
viewId: this.viewId,
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.cardData = res.data.records;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
}
})
},
to_current_details(item) {//跳转到详情
const params = {
viewDetailsId: item.viewDetailsId
}
queryArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
const xmlData = res.data.metaModelData;
const xmlTitle = res.data.version;
const id = res.data.viewDetailsId;
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
localStorage.setItem('commonGraph', JSON.stringify({ show: true, graph: [] }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: [] }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 2, graph: [] }));
this.$router.push( `/main/otherArchiDesignDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.assetConstant}`, () => {}, () => {} );
}
});
},
ok() {//弹框点击确定
this.$refs.form.validate(valid => {
if(valid) {
const params = {
version: this.ruleForm.name,
viewId: this.viewId,
archiId: this.showSelectTitle.archiId,
};
addArchiViewManage(params).then(res => {
if(res.code == 200) {
this.add_dialog2 = false;
this.get_list();
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
} else {
return false;
}
});
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_list();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_list();
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style lang="scss" scoped>
.otherArchiDesign{
width: 100%;
height: 100%;
}
.systemArchiViewDesignContainer{
width: 100%;
height: calc(100% - 86px);
display: flex;
}
.card_container{
overflow-x: hidden;
height: 100%;
overflow-y: auto;
text-align: left;
.card_body{
height: 2000px;
.add_container{
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 60px;
}
}
.card_item{
width: 345px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
text-align: center;
.card_image{
width: 165px;
height: 127px;
}
.card_info{
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0 0 0;
.card_icon{
cursor: pointer;
}
}
}
}
}
.el-pagination{
position: absolute;
bottom: 5%;
left: 45%;
background-color: #fff;
margin-top: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.filter-tree{
width: 300px;
height: 100%;
overflow-y: auto;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #0D867F;
color: #fff;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{
background-color: #0D867F !important;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.right_container{
width: calc(100% - 300px);
height: 100%;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex;
align-items: center;
width: 33%;
}
.search_menu{
margin-right: 20px;
display: flex;
justify-content: space-between;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.btn_icon{
margin-right: 10px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/summaryArchiDesign/details.vue 0 → 100644
<template>
<div class="summaryArchiDesignDetails">
<template v-if="showBtn">
<el-button type="text" class="saveFileBtn" @click="saveFile">保存</el-button>
</template>
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<Drawio :initGraphId="routerId"></Drawio>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<Tables ref="tableComponent"></Tables>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import Tables from './table.vue';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import {
saveArchiViewManageCardDetails
} from '@/api/index.js';
export default {
name: 'summaryArchiDesignDetails',
components: {
Drawio,
Tables
},
data() {
return {
routerId: null,
showBtn: true
};
},
mounted(){
const id = this.$route.query.id;
const graphGroup = this.$route.query.info;
this.routerId = {
id: id,
info: graphGroup
};
window.onmessage = e => {
if(e.data.type == 'saveFileSignalXml') {
MessageBox.confirm('确定保存文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
viewDetailsId: id,
metaModelData: e.data.data.mxGraphModel,
metaModelSvg: e.data.data.base64SvgToString
}
saveArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '保存成功!',
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
}
}
},
methods: {
saveFile() {
document.getElementById("drawioGraph").contentWindow.postMessage({ type: 'saveFileSignal' } , '*');
},
tabs_click_func(data) {
switch(data.index){
case '0':
this.showBtn = true;
console.log('画布页面')
break;
case '1':
this.showBtn = false;
this.$refs.tableComponent.get_table();
break;
}
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.saveFileBtn{
position: absolute;
right: 200px;
top: 0px;
z-index: 9;
color: #0D867F;
}
.el-button--text{
color: #0D867F;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
width: 100%;
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
.divider1{
width: 6px;
margin-right: 6px;
background-color: #0D867F;
}
.divider2{
margin-left: 6px;
width: 74%;
}
.left_graph_container{
width: 100%;
height: 100%;
}
.right_graph_container{
width: 265px;
height: 100%;
position: absolute;
right: -15%;
top: 0;
background-color: rgba(256, 256, 256, 1);
}
.summaryArchiDesignDetails{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.tu_biao_icon{
max-width: 80px;
max-height: 40px;
cursor: pointer;
}
</style>
src/views/summaryArchiDesign/index.vue 0 → 100644
<template>
<div class="summaryArchiDesign">
<el-card class="box-card" style="margin-bottom: 10px;">
<div style="text-align: left;display: flex;align-items: center;">
<el-button type="primary" size="medium" @click="operation('open_add_dialog1', null)">选择系统</el-button>
<div style="margin-left: 20px;margin-right: 20px;" v-if="showSelectTitle.title">您已选择：{{ showSelectTitle.title }}</div>
</div>
</el-card>
<div class="systemArchiViewDesignContainer">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
node-key="viewId"
default-expand-all
@node-click="treeClick"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:current-node-key="currentNodekey"
ref="tree">
</el-tree>
<div class="right_container">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in cardData" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div> -->
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="add_dialog2 = true">
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
</div>
<el-dialog
title='选择系统'
:visible.sync="add_dialog1"
:center="false"
:close-on-click-modal="false"
width="80%">
<div class="search_menu" style="justify-content: center;margin-bottom: 20px;">
<div class="search_menu_item_container">
<div class="search_menu_item" style="width: auto;">
<span class="search_title">单位</span>
<el-input v-no-backslash v-model="searchParams2.let1" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">部门</span>
<el-input v-no-backslash v-model="searchParams2.let2" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">系统名称</span>
<el-input v-no-backslash v-model="searchParams2.let3" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">建设类型</span>
<el-select v-model="searchParams2.let4" placeholder="请选择" class="search_item">
<el-option v-for="item in jianSheLeiXingSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table2">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn" @click="reset2">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<el-table height="400" v-loading="loading2" :data="tableData2" @selection-change="select_table_rows2" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
<el-table-column prop="manageDeptId" label="部门" align="center"></el-table-column>
<el-table-column prop="appName" label="系统名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="建设类型" align="center">
<template slot-scope="scope">
<span v-if="scope.row.buildType == 1">统推</span>
<span v-else>自建</span>
</template>
</el-table-column>
<el-table-column prop="buildOrg" label="承建单位" align="center"></el-table-column>
<el-table-column prop="projectManager" label="项目经理" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
</el-table>
<el-pagination
background
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"
:current-page="pager2.current"
:page-sizes="pager2.sizes"
:page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager2.total">
</el-pagination>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="dialogOperation('selectSystem', null)">确定</el-button>
<el-button @click="add_dialog1 = false">取消</el-button>
</span>
</el-dialog>
<el-dialog
title="新建架构视图"
:visible.sync="add_dialog2"
:center="false"
width="40%">
<div class="add_dialog_content">
<el-form :model="ruleForm" :rules="rules" ref="form">
<el-form-item label="版本名称" prop="name" style="width: 100%;">
<el-input v-no-backslash v-model="ruleForm.name" maxlength="100" style="width: 600px;"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" v-debounce:click="ok">确定</el-button>
<el-button @click="add_dialog2 = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getArchiViewManage,
querysystemInfoManageTable,
getDianXingAnLiSelectData,
getArchiViewManageDetail,
addArchiViewManage,
queryArchiViewManageCardDetails,
queryArchiGraph
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'summaryArchiDesign',
components: {
},
data() {
return {
treeData: [
{
viewId: 0,
viewName: '系统架构视图设计',
subList: []
}
],
currentNodekey: null,
showSelectTitle: {
title: null,
archiId: null,
},
add_dialog1: false,
searchParams2: {
let1: null,
let2: null,
let3: null,
let4: null,
},
tableData2: [],
loading2: false,
pager2: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
selectRow2: [],
jianSheLeiXingSelect: [],
cardData: [],
viewId: null,
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
add_dialog2: false,
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
},
graphGroup: null,
assetConstant: null,
};
},
mounted(){
this.getTreeData();
},
methods: {
operation(type, data) {
switch(type){
case 'open_add_dialog1':
this.open_add_dialog1();
break;
case 'open_add_dialog2':
// this.open_add_dialog2();
break;
}
},
dialogOperation(type, data) {
switch(type){
case 'selectSystem':
this.selectSystem();
break;
case 'cancelSelectSystem':
// this.cancelSelectSystem();
break;
}
},
selectSystem() {//确定选择系统
if(this.selectRow2.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据'
});
return;
}
if(this.selectRow2.length > 1) {
Message({
type: 'error',
message: '只能选择一条数据'
});
return;
}
this.add_dialog1 = false;
this.showSelectTitle.title = this.selectRow2[0].appName;
this.showSelectTitle.archiId = this.selectRow2[0].appId;
},
open_add_dialog1() {
this.add_dialog1 = true;
this.getJianSheLeiXingSelect().then(res => {
this.jianSheLeiXingSelect = res;
});
this.get_table2();
},
getJianSheLeiXingSelect() {//建设类型下拉
const params = {
key: "build_type"
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
})
},
select_table_rows2(data){//表格的勾选
this.selectRow2 = data;
},
search_table2() {//查询
this.pager2.current = 1;
this.get_table2();
},
reset2() {//重置
this.searchParams2.let1 = null;
this.searchParams2.let2 = null;
this.searchParams2.let3 = null;
this.searchParams2.let4 = null;
},
// 每页条数改变
handleSizeChange2(val) {
this.pager2.current = 1;
this.pager2.size = val;
this.get_table2();
},
//当前页码改变
handleCurrentChange2(val) {
this.pager2.current = val;
this.get_table2();
},
get_table2() {//查询表格数据
this.loading2 = true;
const params = {
"manageOrgId": this.searchParams2.let1,
"manageDeptId": this.searchParams2.let2,
"appName": this.searchParams2.let3,
"buildType": this.searchParams2.let4,
"current": this.pager2.current,
"pageSize": this.pager2.size,
};
querysystemInfoManageTable(params).then(res => {
if(res.code == 200) {
this.loading2 = false;
this.tableData2 = res.data.records;
this.pager2.current = res.data.current;
this.pager2.total = res.data.total;
this.pager2.size = res.data.size;
}
});
},
getTreeData() {//获取树节点内容
const params = {
archiStage: 3
}
getArchiViewManage(params).then(res => {
if(res.code == 200) {
this.graphGroup = res.data[0].viewId;
this.assetConstant = res.data[0].archiType;
this.treeData[0].subList = res.data;
this.currentNodekey = res.data[0].subList[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
this.viewId = res.data[0].subList[0].viewId;
this.pager.current = 1;
this.get_list();
}
})
},
treeClick(data, node, e) {//树点击的时候
if(!data.subList) {
// this.graphGroup = node.parent.data.viewId;
this.assetConstant = node.parent.data.archiType;
this.viewId = data.viewId;
this.pager.current = 1;
this.get_list();
}else {
this.viewId = null;
this.cardData = [];
this.pager.total = 0;
}
},
get_list(){//获取卡片数据
const params = {
current: this.pager.current,
pageSize: this.pager.size,
viewId: this.viewId,
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.cardData = res.data.records;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
}
})
},
to_current_details(item) {//跳转到详情
const params = {
viewDetailsId: item.viewDetailsId
}
queryArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
const xmlData = res.data.metaModelData;
const xmlTitle = res.data.version;
const id = res.data.viewDetailsId;
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
this.getArchiGraph().then(res => {
localStorage.setItem('commonGraph', JSON.stringify({ show: true, graph: [] }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: [] }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 2, graph: res.dataEle }));
this.$router.push( `/main/summaryArchiDesignDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.assetConstant}`, () => {}, () => {} );
});
}
});
},
getArchiGraph() {//查询综合图
return new Promise((resolve, reject) => {
const params = {
// archiAssetState: 2,
// archiStage: 2,
delFlag: 0,
state: 1,
archiBelongId: this.graphGroup,
assetConstant: this.assetConstant,
archiViewId: this.viewId
}
queryArchiGraph(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
Message({
type: 'error',
message: res.msg
});
reject(res.msg);
}
})
})
},
ok() {//弹框点击确定
this.$refs.form.validate(valid => {
if(valid) {
const params = {
version: this.ruleForm.name,
viewId: this.viewId,
archiId: this.showSelectTitle.archiId,
};
addArchiViewManage(params).then(res => {
if(res.code == 200) {
this.add_dialog2 = false;
this.get_list();
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
} else {
return false;
}
});
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_list();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_list();
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style lang="scss" scoped>
.summaryArchiDesign{
width: 100%;
height: 100%;
}
.systemArchiViewDesignContainer{
width: 100%;
height: calc(100% - 86px);
display: flex;
}
.card_container{
overflow-x: hidden;
height: 100%;
overflow-y: auto;
text-align: left;
.card_body{
height: 2000px;
.add_container{
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 60px;
}
}
.card_item{
width: 345px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
text-align: center;
.card_image{
width: 165px;
height: 127px;
}
.card_info{
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0 0 0;
.card_icon{
cursor: pointer;
}
}
}
}
}
.el-pagination{
position: absolute;
bottom: 5%;
left: 45%;
background-color: #fff;
margin-top: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.filter-tree{
width: 300px;
height: 100%;
overflow-y: auto;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #0D867F;
color: #fff;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{
background-color: #0D867F !important;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.right_container{
width: calc(100% - 300px);
height: 100%;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex;
align-items: center;
width: 33%;
}
.search_menu{
margin-right: 20px;
display: flex;
justify-content: space-between;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.btn_icon{
margin-right: 10px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/summaryArchiDesign/table.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column label="元素类型" align="center">
<template slot-scope="scope">
<div v-html="scope.row.elementType"></div>
</template>
</el-table-column>
<el-table-column prop="elementEncoding" label="元素编码" align="center"></el-table-column>
<el-table-column label="上游元素" align="center">
<template slot-scope="scope">
<div v-html="scope.row.upstreamElements"></div>
</template>
</el-table-column>
<el-table-column prop="relationship" label="关系" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
getArchiViewManageTable
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
routerId: null
};
},
mounted(){
this.routerId = this.$route.query.id;
},
methods: {
get_table() {
this.loading = true;
const params = {
viewDetailsId: this.routerId
}
getArchiViewManageTable(params).then(res => {
if(res.code == 200) {
this.loading = false;
this.tableData = res.data;
}
})
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
src/views/systemArchiViewDesign/details.vue 0 → 100644
<template>
<div class="systemArchiViewDesignDetails">
<template v-if="showBtn">
<el-button type="text" class="saveFileBtn" @click="saveFile">保存</el-button>
</template>
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<Drawio :initGraphId="routerId"></Drawio>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<Tables ref="tableComponent"></Tables>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import Tables from './table.vue';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import {
saveArchiViewManageCardDetails
} from '@/api/index.js';
export default {
name: 'systemArchiViewDesignDetails',
components: {
Drawio,
Tables
},
data() {
return {
routerId: null,
showBtn: true
};
},
mounted(){
const id = this.$route.query.id;
const graphGroup = this.$route.query.info;
this.routerId = {
id: id,
info: graphGroup
};
window.onmessage = e => {
if(e.data.type == 'saveFileSignalXml') {
MessageBox.confirm('确定保存文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
viewDetailsId: id,
metaModelData: e.data.data.mxGraphModel,
metaModelSvg: e.data.data.base64SvgToString
}
saveArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '保存成功!',
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
}
}
},
methods: {
saveFile() {
document.getElementById("drawioGraph").contentWindow.postMessage({ type: 'saveFileSignal' } , '*');
},
tabs_click_func(data) {
switch(data.index){
case '0':
this.showBtn = true;
console.log('画布页面')
break;
case '1':
this.showBtn = false;
this.$refs.tableComponent.get_table();
break;
}
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.saveFileBtn{
position: absolute;
right: 200px;
top: 0px;
z-index: 9;
color: #0D867F;
}
.el-button--text{
color: #0D867F;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
width: 100%;
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
.divider1{
width: 6px;
margin-right: 6px;
background-color: #0D867F;
}
.divider2{
margin-left: 6px;
width: 74%;
}
.left_graph_container{
width: 100%;
height: 100%;
}
.right_graph_container{
width: 265px;
height: 100%;
position: absolute;
right: -15%;
top: 0;
background-color: rgba(256, 256, 256, 1);
}
.systemArchiViewDesignDetails{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.tu_biao_icon{
max-width: 80px;
max-height: 40px;
cursor: pointer;
}
</style>
src/views/systemArchiViewDesign/index.vue
<template> <template>
<div class="systemArchiViewDesign"> <div class="systemArchiViewDesign">
<div class="table_container"> <el-card class="box-card" style="margin-bottom: 10px;">
<div class="search_menu"> <div style="text-align: left;display: flex;align-items: center;">
<el-button type="primary" size="medium" @click="operation('open_add_dialog1', null)">选择系统</el-button>
<div style="margin-left: 20px;margin-right: 20px;" v-if="showSelectTitle.title">您已选择：{{ showSelectTitle.title }}</div>
</div>
</el-card>
<div class="systemArchiViewDesignContainer">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
node-key="viewId"
default-expand-all
@node-click="treeClick"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:current-node-key="currentNodekey"
ref="tree">
</el-tree>
<div class="right_container">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in cardData" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div> -->
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="add_dialog2 = true">
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
</div>
<el-dialog
title='选择系统'
:visible.sync="add_dialog1"
:center="false"
:close-on-click-modal="false"
width="80%">
<div class="search_menu" style="justify-content: center;margin-bottom: 20px;">
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item" style="width: auto;">
<span class="search_title">演进项</span> <span class="search_title">单位</span>
<el-select v-model="searchParams.conformCount" placeholder="请选择" class="search_item"> <el-input v-no-backslash v-model="searchParams2.let1" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option> </div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">部门</span>
<el-input v-no-backslash v-model="searchParams2.let2" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">系统名称</span>
<el-input v-no-backslash v-model="searchParams2.let3" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item" style="width: auto;">
<span class="search_title">建设类型</span>
<el-select v-model="searchParams2.let4" placeholder="请选择" class="search_item">
<el-option v-for="item in jianSheLeiXingSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="search_menu_btn_container"> <div class="search_menu_btn_container">
<div class="query_btn" @click="search_table"> <div class="query_btn" @click="search_table2">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" /> <img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p> <p>查询</p>
</div> </div>
<div class="reset_btn" @click="reset"> <div class="reset_btn" @click="reset2">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" /> <img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p> <p>重置</p>
</div> </div>
</div> </div>
</div> </div>
<div class="search_btn"> <el-table height="400" v-loading="loading2" :data="tableData2" @selection-change="select_table_rows2" stripe border>
<el-button type="primary" size="medium" icon="el-icon-document-add">新建</el-button> <el-table-column type="selection" width="55"></el-table-column>
<el-button type="primary" size="medium" icon="el-icon-delete">删除</el-button>
<div class="version_btn">
<img class="btn_icon" src="@/assets/archi-ele-list/version.png" alt="" />
<p>发布</p>
</div>
<div class="cancel_version_btn">
<img class="btn_icon" src="@/assets/archi-ele-list/version.png" alt="" />
<p>取消发布</p>
</div>
</div>
<el-table :height="tableHeight" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="deptName" label="单位" align="center"></el-table-column> <el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
<el-table-column prop="startTime" label="统计时间" align="center"></el-table-column> <el-table-column prop="manageDeptId" label="部门" align="center"></el-table-column>
<el-table-column prop="policyName" label="政策名称" align="center"></el-table-column> <el-table-column prop="appName" label="系统名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="policyContent" label="政策描述" align="center"></el-table-column> <el-table-column label="建设类型" align="center">
<el-table-column prop="conformCount" label="符合度" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <span v-if="scope.row.buildType == 1">统推</span>
{{ scope.row.conformCount }}% <span v-else>自建</span>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="usefulCount" label="应用数量" align="center"></el-table-column> <el-table-column prop="buildOrg" label="承建单位" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center"></el-table-column> <el-table-column prop="projectManager" label="项目经理" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
</el-table> </el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange2"
@current-change="handleCurrentChange" @current-change="handleCurrentChange2"
:current-page="pager.current" :current-page="pager2.current"
:page-sizes="pager.sizes" :page-sizes="pager2.sizes"
:page-size="pager.size" :page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="pager.total"> :total="pager2.total">
</el-pagination> </el-pagination>
</div> <span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="dialogOperation('selectSystem', null)">确定</el-button>
<el-button @click="add_dialog1 = false">取消</el-button>
</span>
</el-dialog>
<el-dialog <el-dialog
:title="is_add_edit == 'add' ? '新建字典' : '编辑字典'" title="新建架构视图"
:visible.sync="add_dialog" :visible.sync="add_dialog2"
:center="false" :center="false"
:close-on-click-modal="false" width="40%">
width="60%"> <div class="add_dialog_content">
<el-form :model="ruleForm" ref="form" :rules="rules" style="display: flex;flex-wrap: wrap;"> <el-form :model="ruleForm" :rules="rules" ref="form">
<el-form-item label="字典名称:" prop="let1"> <el-form-item label="版本名称" prop="name" style="width: 100%;">
<el-input v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input> <el-input v-no-backslash v-model="ruleForm.name" maxlength="100" style="width: 600px;"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字典标识:" prop="let2"> </el-form>
<el-input v-no-backslash v-model="ruleForm.let2" maxlength="100"></el-input> </div>
</el-form-item>
<el-form-item class="cross1" label="描述:" prop="let3">
<el-input v-no-backslash tv-model="ruleForm.let3" ype="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容" ></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="save_dicy">保存</el-button> <el-button class="greenButton" v-debounce:click="ok">确定</el-button>
<el-button @click="add_dialog = false">取消</el-button> <el-button @click="add_dialog2 = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
...@@ -92,8 +145,13 @@ ...@@ -92,8 +145,13 @@
<script> <script>
import { import {
getJiShuZhengCeGuanLianShiYongTable, getArchiViewManage,
getDianXingAnLiSelectData querysystemInfoManageTable,
getDianXingAnLiSelectData,
getArchiViewManageDetail,
addArchiViewManage,
queryArchiViewManageCardDetails,
queryArchiGraph
} from '@/api/index.js'; } from '@/api/index.js';
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import $ from 'jquery'; import $ from 'jquery';
...@@ -105,57 +163,109 @@ export default { ...@@ -105,57 +163,109 @@ export default {
}, },
data() { data() {
return { return {
ruleForm: { treeData: [
let1: '', {
let2: '', viewId: 0,
let3: '', viewName: '系统架构视图设计',
subList: []
}
],
currentNodekey: null,
showSelectTitle: {
title: null,
archiId: null,
}, },
rules: { add_dialog1: false,
searchParams2: {
let1: null,
let2: null,
let3: null,
let4: null,
}, },
add_dialog: false, tableData2: [],
is_add_edit: 'add', loading2: false,
tableData: [], pager2: {
loading: false, current: 1,
search_select1: [], sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
selectRow2: [],
jianSheLeiXingSelect: [],
cardData: [],
viewId: null,
pager: { pager: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 20 //总条数 total: 0 //总条数
}, },
tableHeight: null, add_dialog2: false,
searchParams: { ruleForm: {
policyName: null, name: '',
conformCount: null,
}, },
fuHeDu: [], rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
},
graphGroup: null,
assetConstant: null,
}; };
}, },
mounted(){ mounted(){
window.addEventListener('resize', () => { this.getTreeData();
this.set_table_height();
})
this.set_table_height();
this.get_table();
this.get_fu_he_du_select().then(res => {
this.fuHeDu = res;
})
}, },
methods: { methods: {
save_dicy() {//保存字典 operation(type, data) {
this.$refs.form.validate(valid => { switch(type){
if(valid) { case 'open_add_dialog1':
this.open_add_dialog1();
}else { break;
return false; case 'open_add_dialog2':
} // this.open_add_dialog2();
break;
}
},
dialogOperation(type, data) {
switch(type){
case 'selectSystem':
this.selectSystem();
break;
case 'cancelSelectSystem':
// this.cancelSelectSystem();
break;
}
},
selectSystem() {//确定选择系统
if(this.selectRow2.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据'
});
return;
}
if(this.selectRow2.length > 1) {
Message({
type: 'error',
message: '只能选择一条数据'
});
return;
}
this.add_dialog1 = false;
this.showSelectTitle.title = this.selectRow2[0].appName;
this.showSelectTitle.archiId = this.selectRow2[0].appId;
},
open_add_dialog1() {
this.add_dialog1 = true;
this.getJianSheLeiXingSelect().then(res => {
this.jianSheLeiXingSelect = res;
}); });
this.get_table2();
}, },
get_fu_he_du_select() {//符合度下拉 getJianSheLeiXingSelect() {//建设类型下拉
const params = { const params = {
key: "tech_compliance" key: "build_type"
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => { getDianXingAnLiSelectData(params).then(res => {
...@@ -165,71 +275,188 @@ export default { ...@@ -165,71 +275,188 @@ export default {
}) })
}) })
}, },
set_table_height() {//动态设置表格高度 select_table_rows2(data){//表格的勾选
const table_container_height = $(".table_container").height(); this.selectRow2 = data;
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 90 + 'px';
}, },
search_table() {//搜索 search_table2() {//查询
this.pager.current = 1; this.pager2.current = 1;
this.get_table(); this.get_table2();
}, },
reset() {//重置 reset2() {//重置
this.searchParams.policyName = null; this.searchParams2.let1 = null;
this.searchParams.conformCount = null; this.searchParams2.let2 = null;
this.searchParams2.let3 = null;
this.searchParams2.let4 = null;
}, },
// 每页条数改变 // 每页条数改变
handleSizeChange(val) { handleSizeChange2(val) {
this.pager.current = 1; this.pager2.current = 1;
this.pager.size = val; this.pager2.size = val;
this.get_table(); this.get_table2();
}, },
//当前页码改变 //当前页码改变
handleCurrentChange(val) { handleCurrentChange2(val) {
this.pager.current = val; this.pager2.current = val;
this.get_table(); this.get_table2();
}, },
get_table() {//查询表格数据 get_table2() {//查询表格数据
this.loading = true; this.loading2 = true;
const params = { const params = {
"policyName": this.searchParams.policyName, "manageOrgId": this.searchParams2.let1,
"conformCount": this.searchParams.conformCount, "manageDeptId": this.searchParams2.let2,
"current": this.pager.current, "appName": this.searchParams2.let3,
"pageSize": this.pager.size, "buildType": this.searchParams2.let4,
"current": this.pager2.current,
"pageSize": this.pager2.size,
}; };
getJiShuZhengCeGuanLianShiYongTable(params).then(res => { querysystemInfoManageTable(params).then(res => {
this.loading = false; if(res.code == 200) {
console.log(res) this.loading2 = false;
// res.records.map(item => { this.tableData2 = res.data.records;
// const startTime_year = String(new Date(item.startTime).getFullYear()); this.pager2.current = res.data.current;
// const startTime_month = String(new Date(item.startTime).getMonth() + 1); this.pager2.total = res.data.total;
// let startTime_day = String(new Date(item.startTime).getDay()); this.pager2.size = res.data.size;
// startTime_day = startTime_day.length == 1 ? '0' + startTime_day : startTime_day; }
});
// item['startTime_'] = startTime_year + '-' + startTime_month + '-' + startTime_day; },
// }); getTreeData() {//获取树节点内容
// this.get_fu_he_du_select().then(res2 => { const params = {
// res.records.map(item3 => { archiStage: 2
// let result1 = res2.find(item2 => item2.value == item3.conformCount); }
// item3['conformCount_'] = result1 ? result1.label : ''; getArchiViewManage(params).then(res => {
// }); if(res.code == 200) {
// this.tableData = res.records; this.graphGroup = res.data[0].viewId;
// }) this.assetConstant = res.data[0].archiType;
this.tableData = res.records; this.treeData[0].subList = res.data;
this.pager.current = res.current; this.currentNodekey = res.data[0].subList[0].viewId;
this.pager.total = res.total; this.$nextTick(() => {
this.pager.size = res.size; this.$refs.tree.setCurrentKey(this.currentNodekey);
});
this.viewId = res.data[0].subList[0].viewId;
this.pager.current = 1;
this.get_list();
}
})
},
treeClick(data, node, e) {//树点击的时候
if(!data.subList) {
// this.graphGroup = node.parent.data.viewId;
this.assetConstant = node.parent.data.archiType;
this.viewId = data.viewId;
this.pager.current = 1;
this.get_list();
}else {
this.viewId = null;
this.cardData = [];
this.pager.total = 0;
}
},
get_list(){//获取卡片数据
const params = {
current: this.pager.current,
pageSize: this.pager.size,
viewId: this.viewId,
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.cardData = res.data.records;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
}
})
},
to_current_details(item) {//跳转到详情
const params = {
viewDetailsId: item.viewDetailsId
}
queryArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
const xmlData = res.data.metaModelData;
const xmlTitle = res.data.version;
const id = res.data.viewDetailsId;
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
// if(res.code == 200) { this.getArchiGraph().then(res => {
// this.loading = false; localStorage.setItem('commonGraph', JSON.stringify({ show: true, graph: [] }));
// console.log(res) localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: [] }));
// // this.tableData = res. localStorage.setItem('joinGraph', JSON.stringify({ state: 2, graph: res.dataEle }));
// } this.$router.push( `/main/systemArchiViewDesignDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.assetConstant}`, () => {}, () => {} );
});
}
}); });
}, },
getArchiGraph() {//查询综合图
return new Promise((resolve, reject) => {
const params = {
// archiAssetState: 2,
// archiStage: 2,
delFlag: 0,
state: 1,
archiBelongId: this.graphGroup,
assetConstant: this.assetConstant,
archiViewId: this.viewId
}
queryArchiGraph(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
Message({
type: 'error',
message: res.msg
});
reject(res.msg);
}
})
})
},
ok() {//弹框点击确定
this.$refs.form.validate(valid => {
if(valid) {
const params = {
version: this.ruleForm.name,
viewId: this.viewId,
archiId: this.showSelectTitle.archiId,
};
addArchiViewManage(params).then(res => {
if(res.code == 200) {
this.add_dialog2 = false;
this.get_list();
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
} else {
return false;
}
});
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_list();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_list();
},
} }
} }
</script> </script>
...@@ -241,63 +468,122 @@ export default { ...@@ -241,63 +468,122 @@ export default {
padding: 60px 15px 60px 15px; padding: 60px 15px 60px 15px;
} }
</style> </style>
<style scoped> <style lang="scss" scoped>
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.cancel_version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.systemArchiViewDesign{ .systemArchiViewDesign{
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.systemArchiViewDesignContainer{
width: 100%;
height: calc(100% - 86px);
display: flex; display: flex;
flex-direction: column; }
justify-content: flex-start; .card_container{
align-items: center; overflow-x: hidden;
height: 100%;
overflow-y: auto;
text-align: left;
.card_body{
height: 2000px;
.add_container{
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 60px;
}
}
.card_item{
width: 345px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
float: left;
text-align: center;
.card_image{
width: 165px;
height: 127px;
}
.card_info{
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0 0 0;
.card_icon{
cursor: pointer;
}
}
}
}
}
.el-pagination{
position: absolute;
bottom: 5%;
left: 45%;
background-color: #fff;
margin-top: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
} }
.el-button--primary{ .el-button--primary{
background: rgba(13,134,127,0.1); background: rgba(13,134,127,0.1);
color: #0D867F; color: #0D867F;
border: 0; border: 0;
} }
/deep/ .el-input-group__append{ .filter-tree{
width: 300px;
height: 100%;
overflow-y: auto;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #0D867F; background-color: #0D867F;
color: #fff; color: #fff;
cursor: pointer;
} }
.search_btn{ /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{
width: 100%; background-color: #0D867F !important;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.right_container{
width: calc(100% - 300px);
height: 100%;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex; display: flex;
margin-top: 50px; align-items: center;
margin-bottom: 20px; width: 33%;
} }
.search_menu{ .search_menu{
margin-right: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 50px;
} }
.search_menu_item_container{ .search_menu_item_container{
display: flex; display: flex;
...@@ -320,6 +606,15 @@ export default { ...@@ -320,6 +606,15 @@ export default {
.search_item{ .search_item{
width: 60%; width: 60%;
} }
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.btn_icon{
margin-right: 10px;
}
.query_btn{ .query_btn{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -333,7 +628,6 @@ export default { ...@@ -333,7 +628,6 @@ export default {
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
} }
.reset_btn{ .reset_btn{
display: flex; display: flex;
...@@ -347,39 +641,5 @@ export default { ...@@ -347,39 +641,5 @@ export default {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex;
align-items: center;
width: 33%;
} }
</style> </style>
\ No newline at end of file
src/views/systemArchiViewDesign/table.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column label="元素类型" align="center">
<template slot-scope="scope">
<div v-html="scope.row.elementType"></div>
</template>
</el-table-column>
<el-table-column prop="elementEncoding" label="元素编码" align="center"></el-table-column>
<el-table-column label="上游元素" align="center">
<template slot-scope="scope">
<div v-html="scope.row.upstreamElements"></div>
</template>
</el-table-column>
<el-table-column prop="relationship" label="关系" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
getArchiViewManageTable
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
routerId: null
};
},
mounted(){
this.routerId = this.$route.query.id;
},
methods: {
get_table() {
this.loading = true;
const params = {
viewDetailsId: this.routerId
}
getArchiViewManageTable(params).then(res => {
if(res.code == 200) {
this.loading = false;
this.tableData = res.data;
}
})
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!