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 @@
},
"dependencies": {
"@onlyoffice/document-editor-vue": "^1.3.0",
"@wangeditor/editor-for-vue": "^1.0.2",
"axios": "^1.6.2",
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
......
src/api/index.js
......@@ -551,4 +551,8 @@ export function addSystemTable(params) {
export function editSystemTable(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 = [
component: () => import('@/views/systemArchiViewDesign/index.vue'),
},
{
path: '/main/systemArchiViewDesignDetails',//系统架构视图设计详情
name: 'systemArchiViewDesignDetails',
component: () => import('@/views/systemArchiViewDesign/details.vue'),
},
{
path: '/main/documentEdit',//文档编辑
name: 'documentEdit',
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 @@
<span style="margin-left: 5px;">概设阶段架构设计</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '概设阶段架构设计', '概设阶段架构设计')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">概设阶段架构设计</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '概设阶段架构设计', '其他视图设计')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">其他视图设计</span>
</div>
......@@ -541,6 +541,14 @@
this.$router.push( '/main/comCenterServeList', () => {}, () => {} );
this.visible1 = false;
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 @@
</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="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
......@@ -301,7 +301,7 @@
</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 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-card>
</div>
......@@ -325,7 +325,8 @@
deleteSystemTable,
addSystemTable,
editSystemTable,
archiIntelligenceSearchTree
archiIntelligenceSearchTree,
systemArchiSaveFactor
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
......@@ -498,8 +499,8 @@
},
get_table() {//查询表格数据
const params = {
// "archiAssetState": this.searchParams.archiAssetState,
// "archiStage": this.searchParams.archiStage,
"archiAssetState": this.searchParams.archiAssetState,
"archiStage": this.searchParams.archiStage,
"assetName": this.searchParams.let1,
"createMan": this.searchParams.let3,
"archiEleId": this.searchParams.let2,
......@@ -686,8 +687,8 @@
handleCheckAllChange(val, item) {
let cityOptions = [];
if(val){
item.subList.forEach(item => {
cityOptions.push(item.assetName)
item.subList.forEach(item2 => {
cityOptions.push(item2.assetId);
});
}else {
cityOptions = [];
......@@ -696,16 +697,13 @@
item.isIndeterminate = false;
},
handleCheckedCitiesChange(value, item) {
console.log(value)
console.log(item)
let checkedCount = value.length;
item.checkAll = checkedCount === item.subList.length;
item.isIndeterminate = checkedCount > 0 && checkedCount < item.subList.length;
},
getElementTreeData(type) {//查询左侧树
getElementTreeData(type) {//查询选择遵从总体架构资产类型数据
archiIntelligenceSearchTree({}).then(res => {
if(res.code == 200) {
console.log(res.data);
res.data.map(item => {
item['isIndeterminate'] = false;
item['checkAll'] = false;
......@@ -798,7 +796,33 @@
}
},
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(){//保存架构
this.$refs.form.validate(valid => {
......@@ -934,7 +958,6 @@
this.showSelectTitle.appId = this.selectRow2[0].appId;
this.showSelectTitle.appCode = this.selectRow2[0].appCode;
this.showSelectTitle.appName = this.selectRow2[0].appName;
},
cancelSelectSystem() {//取消选择系统
this.add_dialog1 = false;
......
src/views/archi-view-manage/index.vue
......@@ -493,7 +493,7 @@ export default {
},
getData() {//获取树节点内容
const params = {
archiStage: 1
}
getArchiViewManage(params).then(res => {
if(res.code == 200) {
......
src/views/documentEdit/index.vue
......@@ -9,6 +9,7 @@
:props="{ children: 'children', label: 'docTitle', id: 'docTitleId' }"
default-expand-all
node-key="docTitleId"
:expand-on-click-node="false"
@node-click="treeClick"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
......@@ -44,7 +45,7 @@
<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-form-item>
<el-form-item label="参考规范:">
<!-- <el-form-item label="参考规范:">
<el-button type="text" icon="el-icon-plus">添加</el-button>
</el-form-item>
<el-form-item label="引用章节:">
......@@ -61,9 +62,26 @@
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="正文内容:" prop="let5">
</el-form-item> -->
<!-- <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-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>
</el-card>
......@@ -98,10 +116,14 @@ import {
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
name: 'documentEdit',
components: {
Editor,
Toolbar
},
data() {
return {
......@@ -132,12 +154,24 @@ export default {
},
addOrEditInfo: {},
leftInfo: {},
editor: null,
editorHtml: '<div></div>',
toolbarConfig: { },
editorConfig: { placeholder: '请输入内容...' },
mode: 'default', // or 'simple
};
},
beforeDestroy() {
if(this.editor == null) return;
this.editor.destroy(); // 组件销毁时，及时销毁编辑器
},
mounted(){
this.getDocCatalog();
},
methods: {
onCreated(editor) {// 一定要用 Object.seal() ，否则会报错
this.editor = Object.seal(editor);
},
handleCommand(type, data) {//目录树的操作
console.log(typeof type)
console.log(data)
......@@ -383,6 +417,7 @@ export default {
this.ruleForm.let1 = res.data.docTitle;
this.ruleForm.let2 = res.data.paraExplain;
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>
<div class="systemArchiViewDesign">
<div class="table_container">
<div class="search_menu">
<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">
<span class="search_title">演进项</span>
<el-select v-model="searchParams.conformCount" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
<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_table">
<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="reset">
<div class="reset_btn" @click="reset2">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<el-button type="primary" size="medium" icon="el-icon-document-add">新建</el-button>
<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 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="deptName" label="单位" align="center"></el-table-column>
<el-table-column prop="startTime" label="统计时间" align="center"></el-table-column>
<el-table-column prop="policyName" label="政策名称" align="center"></el-table-column>
<el-table-column prop="policyContent" label="政策描述" align="center"></el-table-column>
<el-table-column prop="conformCount" label="符合度" align="center">
<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">
<div>
{{ scope.row.conformCount }}%
</div>
<span v-if="scope.row.buildType == 1">统推</span>
<span v-else>自建</span>
</template>
</el-table-column>
<el-table-column prop="usefulCount" label="应用数量" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center"></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
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
@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="pager.total">
:total="pager2.total">
</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
:title="is_add_edit == 'add' ? '新建字典' : '编辑字典'"
:visible.sync="add_dialog"
title="新建架构视图"
:visible.sync="add_dialog2"
:center="false"
:close-on-click-modal="false"
width="60%">
<el-form :model="ruleForm" ref="form" :rules="rules" style="display: flex;flex-wrap: wrap;">
<el-form-item label="字典名称:" prop="let1">
<el-input v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="字典标识:" prop="let2">
<el-input v-no-backslash v-model="ruleForm.let2" maxlength="100"></el-input>
</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>
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" @click="save_dicy">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button>
<el-button class="greenButton" v-debounce:click="ok">确定</el-button>
<el-button @click="add_dialog2 = false">取消</el-button>
</span>
</el-dialog>
</div>
......@@ -92,8 +145,13 @@
<script>
import {
getJiShuZhengCeGuanLianShiYongTable,
getDianXingAnLiSelectData
getArchiViewManage,
querysystemInfoManageTable,
getDianXingAnLiSelectData,
getArchiViewManageDetail,
addArchiViewManage,
queryArchiViewManageCardDetails,
queryArchiGraph
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
......@@ -105,57 +163,109 @@ export default {
},
data() {
return {
ruleForm: {
let1: '',
let2: '',
let3: '',
treeData: [
{
viewId: 0,
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,
is_add_edit: 'add',
tableData: [],
loading: false,
search_select1: [],
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: 20 //总条数
total: 0 //总条数
},
tableHeight: null,
searchParams: {
policyName: null,
conformCount: null,
add_dialog2: false,
ruleForm: {
name: '',
},
fuHeDu: [],
rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
},
graphGroup: null,
assetConstant: null,
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
this.get_fu_he_du_select().then(res => {
this.fuHeDu = res;
})
this.getTreeData();
},
methods: {
save_dicy() {//保存字典
this.$refs.form.validate(valid => {
if(valid) {
}else {
return false;
}
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();
},
get_fu_he_du_select() {//符合度下拉
getJianSheLeiXingSelect() {//建设类型下拉
const params = {
key: "tech_compliance"
key: "build_type"
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
......@@ -165,71 +275,188 @@ export default {
})
})
},
set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height();
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';
select_table_rows2(data){//表格的勾选
this.selectRow2 = data;
},
search_table() {//搜索
this.pager.current = 1;
this.get_table();
search_table2() {//查询
this.pager2.current = 1;
this.get_table2();
},
reset() {//重置
this.searchParams.policyName = null;
this.searchParams.conformCount = null;
reset2() {//重置
this.searchParams2.let1 = null;
this.searchParams2.let2 = null;
this.searchParams2.let3 = null;
this.searchParams2.let4 = null;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_table();
handleSizeChange2(val) {
this.pager2.current = 1;
this.pager2.size = val;
this.get_table2();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_table();
handleCurrentChange2(val) {
this.pager2.current = val;
this.get_table2();
},
get_table() {//查询表格数据
this.loading = true;
get_table2() {//查询表格数据
this.loading2 = true;
const params = {
"policyName": this.searchParams.policyName,
"conformCount": this.searchParams.conformCount,
"current": this.pager.current,
"pageSize": this.pager.size,
"manageOrgId": this.searchParams2.let1,
"manageDeptId": this.searchParams2.let2,
"appName": this.searchParams2.let3,
"buildType": this.searchParams2.let4,
"current": this.pager2.current,
"pageSize": this.pager2.size,
};
getJiShuZhengCeGuanLianShiYongTable(params).then(res => {
this.loading = false;
console.log(res)
// res.records.map(item => {
// const startTime_year = String(new Date(item.startTime).getFullYear());
// const startTime_month = String(new Date(item.startTime).getMonth() + 1);
// let startTime_day = String(new Date(item.startTime).getDay());
// startTime_day = startTime_day.length == 1 ? '0' + startTime_day : startTime_day;
// item['startTime_'] = startTime_year + '-' + startTime_month + '-' + startTime_day;
// });
// this.get_fu_he_du_select().then(res2 => {
// res.records.map(item3 => {
// let result1 = res2.find(item2 => item2.value == item3.conformCount);
// item3['conformCount_'] = result1 ? result1.label : '';
// });
// this.tableData = res.records;
// })
this.tableData = res.records;
this.pager.current = res.current;
this.pager.total = res.total;
this.pager.size = res.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: 2
}
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);
// if(res.code == 200) {
// this.loading = false;
// console.log(res)
// // this.tableData = res.
// }
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/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>
......@@ -241,63 +468,122 @@ export default {
padding: 60px 15px 60px 15px;
}
</style>
<style 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;
}
<style lang="scss" scoped>
.systemArchiViewDesign{
width: 100%;
height: 100%;
}
.systemArchiViewDesignContainer{
width: 100%;
height: calc(100% - 86px);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.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;
}
/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;
color: #fff;
cursor: pointer;
}
.search_btn{
width: 100%;
/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;
margin-top: 50px;
margin-bottom: 20px;
align-items: center;
width: 33%;
}
.search_menu{
margin-right: 20px;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.search_menu_item_container{
display: flex;
......@@ -320,6 +606,15 @@ export default {
.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;
......@@ -333,7 +628,6 @@ export default {
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
......@@ -347,39 +641,5 @@ export default {
font-size: 14px;
color: #666;
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>
\ 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!