Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 4d39208c by xiehao
Options

1、新增概设架构遵从检查-列表

1 parent c173fecd
Inline Side-by-side
Showing with 441 additions and 407 deletions
src/api/index.js
...@@ -560,3 +560,7 @@ export function systemArchiSaveFactor(params) { ...@@ -560,3 +560,7 @@ export function systemArchiSaveFactor(params) {
return post('/network/arc-ast-sys/extend', params); return post('/network/arc-ast-sys/extend', params);
} }
// 概设架构遵从检查-列表
export function getGaiSheJiaGouZunCongJiaChaTable(params) {
return post('/network/app-archi-control-requirements/', params);
}
src/views/reviewArchiFollowCheck/index.vue
<template> <template>
<div class="reviewArchiFollowCheck"> <div class="reviewArchiFollowCheck">
<div class="table_container"> <div class="table_container">
<div class="search_menu"> <div class="search_menu">
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">单位</span> <span class="search_title">单位</span>
<el-select v-model="searchParams.let1" placeholder="请选择" class="search_item"> <el-select v-model="searchParams.let1" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">部门</span> <span class="search_title">部门</span>
<el-select v-model="searchParams.let2" placeholder="请选择" class="search_item"> <el-select v-model="searchParams.let2" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">系统名称</span> <span class="search_title">系统名称</span>
<el-select v-model="searchParams.let3" placeholder="请选择" class="search_item"> <el-input v-no-backslash v-model="searchParams.let3" 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>
</el-select> <div class="search_menu_item">
</div> <span class="search_title">建设类型</span>
<div class="search_menu_item"> <el-select v-model="searchParams.let4" placeholder="请选择" class="search_item">
<span class="search_title">建设类型</span> <el-option v-for="item in ziJianLeiXing" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-select v-model="searchParams.let4" placeholder="请选择" class="search_item"> </el-select>
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option> </div>
</el-select> </div>
</div> <div class="search_menu_btn_container">
</div> <div class="query_btn" @click="search_table">
<div class="search_menu_btn_container"> <img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt=""/>
<div class="query_btn" @click="search_table"> <p>查询</p>
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" /> </div>
<p>查询</p> <div class="reset_btn" @click="reset">
</div> <img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt=""/>
<div class="reset_btn" @click="reset"> <p>重置</p>
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" /> </div>
<p>重置</p> </div>
</div> </div>
</div> <div class="search_btn">
</div> <el-button type="primary" size="medium" @click="toDetails">概设遵从情况</el-button>
<div class="search_btn"> </div>
<el-button type="primary" size="medium" @click="toDetails">概设遵从情况</el-button> <el-table :height="tableHeight" v-loading="loading" @selection-change="select_table_rows" :data="tableData" stripe border>
</div> <el-table-column type="selection" width="55"></el-table-column>
<el-table :height="tableHeight" v-loading="loading" @selection-change="select_table_rows" :data="tableData" stripe border> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="manageOrgId" label="单位" align="center"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column prop="manageDeptId" label="部门" align="center"></el-table-column>
<el-table-column prop="deptName" 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="startTime" label="部门" align="center"></el-table-column> <el-table-column prop="buildType" label="建设类型" align="center">
<el-table-column prop="policyName" label="系统名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column> <template slot-scope="scope">
<el-table-column prop="policyContent" label="建设类型" align="center"></el-table-column> <span v-if="scope.row.buildType == 1">统推</span>
<el-table-column prop="policyContent" label="项目名称" align="center"></el-table-column> <span v-else-if="scope.row.buildType == 2">自建</span>
<el-table-column prop="policyContent" label="是否续建" align="center"></el-table-column> </template>
<el-table-column prop="policyContent" label="承建单位" align="center"></el-table-column> </el-table-column>
<el-table-column prop="policyContent" label="项目经理" align="center"></el-table-column> <el-table-column prop="prjName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="conformCount" label="安全架构遵从" align="center"> <el-table-column prop="prjPlanClass" label="是否续建" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="manageOrgId" label="承建单位" align="center"></el-table-column>
<div> <el-table-column prop="projectManager" label="项目经理" align="center"></el-table-column>
{{ scope.row.conformCount }}% <el-table-column prop="remark" label="安全架构遵从" align="center">
</div> <template slot-scope="scope">
</template> <el-button type="text" @click="check(scope.row)">查看</el-button>
</el-table-column> </template>
<el-table-column prop="usefulCount" label="部署架构审查" align="center"></el-table-column> </el-table-column>
<el-table-column prop="remark" label="技术架构遵从" align="center"></el-table-column> <el-table-column prop="remark" label="部署架构审查" align="center">
<el-table-column prop="remark" label="应用架构遵从" align="center"></el-table-column> <template slot-scope="scope">
<el-table-column prop="remark" label="物理数据架构遵从" align="center"></el-table-column> <el-button type="text" @click="check(scope.row)">查看</el-button>
</el-table> </template>
<!-- <el-pagination </el-table-column>
background <el-table-column prop="remark" label="技术架构遵从" align="center">
layout="prev, pager, next" <template slot-scope="scope">
:total="50"> <el-button type="text" @click="check(scope.row)">查看</el-button>
</el-pagination> --> </template>
<el-pagination </el-table-column>
background <el-table-column prop="remark" label="应用架构遵从" align="center">
@size-change="handleSizeChange" <template slot-scope="scope">
@current-change="handleCurrentChange" <el-button type="text" @click="check(scope.row)">查看</el-button>
:current-page="pager.current" </template>
:page-sizes="pager.sizes" </el-table-column>
:page-size="pager.size" <el-table-column prop="remark" label="物理数据架构遵从" align="center">
layout="total, sizes, prev, pager, next, jumper" <template slot-scope="scope">
:total="pager.total"> <el-button type="text" @click="check(scope.row)">查看</el-button>
</el-pagination> </template>
</div> </el-table-column>
<el-dialog </el-table>
:title="is_add_edit == 'add' ? '新建字典' : '编辑字典'" <el-pagination
:visible.sync="add_dialog" background
:center="false" @size-change="handleSizeChange"
:close-on-click-modal="false" @current-change="handleCurrentChange"
width="60%"> :current-page="pager.current"
<el-form :model="ruleForm" ref="form" :rules="rules" style="display: flex;flex-wrap: wrap;"> :page-sizes="pager.sizes"
<el-form-item label="字典名称:" prop="let1"> :page-size="pager.size"
<el-input v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input> layout="total, sizes, prev, pager, next, jumper"
</el-form-item> :total="pager.total">
<el-form-item label="字典标识:" prop="let2"> </el-pagination>
<el-input v-no-backslash v-model="ruleForm.let2" maxlength="100"></el-input> </div>
</el-form-item> <el-dialog
<el-form-item class="cross1" label="描述:" prop="let3"> :title="is_add_edit == 'add' ? '新建字典' : '编辑字典'"
<el-input v-no-backslash v-model="ruleForm.let3" type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容"></el-input> :visible.sync="add_dialog"
</el-form-item> :center="false"
</el-form> :close-on-click-modal="false"
<span slot="footer" class="dialog-footer"> 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 v-model="ruleForm.let3" type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="save_dicy">保存</el-button> <el-button class="greenButton" @click="save_dicy">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button> <el-button @click="add_dialog = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {
getJiShuZhengCeGuanLianShiYongTable, getJiShuZhengCeGuanLianShiYongTable,
getDianXingAnLiSelectData getDianXingAnLiSelectData, getGaiSheJiaGouZunCongJiaChaTable, gAllDictKey
} 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';
export default { export default {
name: 'reviewArchiFollowCheck', name: 'reviewArchiFollowCheck',
components: { components: {},
data() {
return {
ruleForm: {
let1: '',
let2: '',
let3: '',
},
rules: {},
add_dialog: false,
is_add_edit: 'add',
tableData: [],
loading: false,
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null,
searchParams: {
let1: null,
let2: null,
let3: null,
let4: null,
},
fuHeDu: [],
ziJianLeiXing: [],
selectRows: []
};
},
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.get_zi_jian_lei_xing_select().then(
res => {
this.ziJianLeiXing = res;
}
)
},
methods: {
select_table_rows(data) {//表格的勾选
this.selectRows = data;
},
toDetails() {
if (this.selectRows.length == 0) {
Message({
type: 'warning',
message: '请选择一条数据!'
});
return;
}
if (this.selectRows.length > 1) {
Message({
type: 'warning',
message: '只能选择一条数据!'
});
return;
}
this.$router.push(`/main/reviewArchiFollowCheckDetails`, () => {
}, () => {
});
},
save_dicy() {//保存字典
this.$refs.form.validate(valid => {
if (valid) {
}, } else {
data() { return false;
return { }
ruleForm: { });
let1: '', },
let2: '', get_fu_he_du_select() {//符合度下拉
let3: '', const params = {
}, key: "tech_compliance"
rules: { }
return new Promise((resolve, reject) => {
}, getDianXingAnLiSelectData(params).then(res => {
add_dialog: false, if (res.code == 200) {
is_add_edit: 'add', resolve(res.data);
tableData: [], }
loading: false, })
search_select1: [], })
pager: { },
current: 1, get_zi_jian_lei_xing_select() {//自建类型下拉
sizes: [10, 20, 50, 100, 200], const params = {
size: 10, key: "build_type"
total: 20 //总条数 }
}, return new Promise((resolve, reject) => {
tableHeight: null, getDianXingAnLiSelectData(params).then(res => {
searchParams: { if (res.code == 200) {
let1: null, resolve(res.data);
let2: null, }
let3: null, })
let4: null, })
}, },
fuHeDu: [], set_table_height() {//动态设置表格高度
selectRows: [] 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';
},
search_table() {//搜索
this.pager.current = 1;
this.get_table();
},
reset() {//重置
this.searchParams.let1 = null;
this.searchParams.let2 = null;
this.searchParams.let3 = null;
this.searchParams.let4 = null;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_table();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_table();
},
get_table() {//查询表格数据
this.loading = true;
const params = {
"policyName": this.searchParams.let1,
"conformCount": this.searchParams.let2,
"prjName": this.searchParams.let3,
"buildType": this.searchParams.let4,
"current": this.pager.current,
"pageSize": this.pager.size,
};
getGaiSheJiaGouZunCongJiaChaTable(params).then(res => {
this.loading = false;
if (res.code === 200) {
this.loading = false;
this.tableData = res.data.records;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
this.pager.size = res.data.size;
}
});
},
}
}
</script>
<style>
.confirmClass {
background-color: #0D867F !important;
}
}; .el-message-box__content {
}, padding: 60px 15px 60px 15px;
mounted(){ }
window.addEventListener('resize', () => { </style>
this.set_table_height(); <style scoped>
}) .version_btn {
this.set_table_height(); display: flex;
this.get_table(); align-items: center;
this.get_fu_he_du_select().then(res => { justify-content: center;
this.fuHeDu = res; width: 84px;
}) height: 32px;
}, background: rgba(13, 134, 127, 0.1);
methods: { border-radius: 6px 6px 6px 6px;
select_table_rows(data){//表格的勾选 /* border: 1px solid #0D867F; */
this.selectRows = data; font-size: 14px;
}, color: #0D867F;
toDetails() { cursor: pointer;
if(this.selectRows.length == 0) { margin-left: 15px;
Message({ }
type: 'warning',
message: '请选择一条数据!'
});
return;
}
if(this.selectRows.length >1) {
Message({
type: 'warning',
message: '只能选择一条数据!'
});
return;
}
this.$router.push( `/main/reviewArchiFollowCheckDetails`, () => {}, () => {} );
},
save_dicy() {//保存字典
this.$refs.form.validate(valid => {
if(valid) {
}else {
return false;
}
});
},
get_fu_he_du_select() {//符合度下拉
const params = {
key: "tech_compliance"
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
})
},
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';
},
search_table() {//搜索
this.pager.current = 1;
this.get_table();
},
reset() {//重置
this.searchParams.let1 = null;
this.searchParams.let2 = null;
this.searchParams.let3 = null;
this.searchParams.let4 = null;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_table();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_table();
},
get_table() {//查询表格数据
this.loading = true;
const params = {
"policyName": this.searchParams.let1,
"conformCount": this.searchParams.let2,
"conformCount": this.searchParams.let3,
"conformCount": this.searchParams.let4,
"current": this.pager.current,
"pageSize": this.pager.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; .cancel_version_btn {
// }); display: flex;
// this.get_fu_he_du_select().then(res2 => { align-items: center;
// res.records.map(item3 => { justify-content: center;
// let result1 = res2.find(item2 => item2.value == item3.conformCount); width: 104px;
// item3['conformCount_'] = result1 ? result1.label : ''; height: 32px;
// }); background: rgba(13, 134, 127, 0.1);
// this.tableData = res.records; border-radius: 6px 6px 6px 6px;
// }) /* border: 1px solid #0D867F; */
this.tableData = res.records; font-size: 14px;
this.pager.current = res.current; color: #0D867F;
this.pager.total = res.total; cursor: pointer;
this.pager.size = res.size; margin-left: 15px;
}
.reviewArchiFollowCheck {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.el-button--primary {
background: rgba(13, 134, 127, 0.1);
color: #0D867F;
border: 0;
}
// if(res.code == 200) { /deep/ .el-input-group__append {
// this.loading = false; background-color: #0D867F;
// console.log(res) color: #fff;
// // this.tableData = res. cursor: pointer;
// } }
});
}, .search_btn {
} width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
} }
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
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;
}
.reviewArchiFollowCheck{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.search_menu{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.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%;
}
.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;
} .search_menu {
.reset_btn{ display: flex;
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 50px;
justify-content: center; }
width: 76px;
height: 32px; .search_menu_item_container {
background: rgba(244,244,244,1); display: flex;
border-radius: 6px 6px 6px 6px; align-items: center;
border: 1px solid #ccc; }
font-size: 14px;
color: #666; .search_menu_btn_container {
cursor: pointer; 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 {
.btn_icon{ width: 60%;
margin-right: 10px; }
}
.table_container{ .query_btn {
width: 97%; display: flex;
height: calc(100% - 40px); align-items: center;
margin-top: 20px; justify-content: center;
} width: 76px;
.el-pagination{ height: 32px;
margin-top: 30px; background: rgba(13, 134, 127, 1);
} border-radius: 6px 6px 6px 6px;
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ border: 1px solid #0D867F;
background-color: #0D867F; font-size: 14px;
} color: #fff;
/deep/ .el-dialog__header{ margin-right: 10px;
background-color: #0D867F; cursor: pointer;
text-align: left;
} }
/deep/ .el-dialog__title{
color: #fff; .reset_btn {
} display: flex;
/deep/ .el-dialog__close { align-items: center;
color: #fff; justify-content: center;
} width: 76px;
.greenButton{ height: 32px;
background-color: #0D867F; background: rgba(244, 244, 244, 1);
color: #fff; border-radius: 6px 6px 6px 6px;
} border: 1px solid #ccc;
.el-form-item{ font-size: 14px;
display: flex; color: #666;
align-items: center; cursor: pointer;
width: 33%;
} }
.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
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!