Skip to content

liangzhen / framework-tools-web

Go to a project
Commit c3cad44f by 史敦盼
Options

表单基础封装,批次计划管理初版

1 parent 14e21fd0
Inline Side-by-side
Showing with 1964 additions and 1076 deletions
src/api/interface.js 0 → 100644
// 接口url
// 批量计划管理分页查询
export const batchPlanManagement = '/network/bat-plan-info/'
src/components/Form.vue 0 → 100644
<!--
* @Description: 表单组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-14 10:33:49
-->
<!-- /**
* 搜索栏公共组件
*/ -->
<template>
<div class="form-box">
<el-form
:model="formData"
ref="formRef"
:label-width="labelWidth"
:label-position="labelPosition"
>
<el-form-item
v-for="(item, index) in formOptions"
:key="newKeys[index]"
:prop="item.prop"
:label="item.label"
:rules="item.rules"
>
<SearchFormItem v-model="formData[item.prop]" :itemOptions="item" />
</el-form-item>
<!-- 自定义插槽，可用于特殊表单块 -->
<slot></slot>
</el-form>
</div>
</template>
<script>
import SearchFormItem from './SearchFormItem.vue'
export default {
props: {
/**
* 表单配置
* 示例：
* [{
* label: '用户名', // label文字
* prop: 'username', // 字段名
* element: 'el-input', // 指定elementui组件
* initValue: '阿黄', // 字段初始值
* placeholder: '请输入用户名', // elementui组件属性
* rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
* events: { // elementui组件方法
* input (val) {
* console.log(val)
* },
* ...... // 可添加任意elementui组件支持的方法
* }
* ...... // 可添加任意elementui组件支持的属性
* }]
*/
formOptions: {
type: Array,
required: true,
default() {
return []
},
},
labelWidth: {
type: String,
default: '80px',
},
labelPosition: {
type: String,
default: 'right',
},
},
data() {
return {
formData: {},
}
},
computed: {
newKeys() {
return this.formOptions.map((v) => {
return this.createUniqueString()
})
},
},
created() {
this.addInitValue()
},
methods: {
createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
},
// 校验
onValidate(callback) {
this.$refs.formRef.validate((valid) => {
if (valid) {
console.log(this.formData)
callback()
}
})
},
// 获取表单数据
getData() {
this.onValidate(() => {
this.$emit('getData', this.formData)
})
},
// 导出
onExport() {
this.onValidate(() => {
this.$emit('onExport', this.formData)
})
},
onReset() {
this.$refs.formRef.resetFields()
},
// 添加初始值
addInitValue() {
const obj = {}
this.formOptions.forEach((v) => {
if (v.initValue !== undefined) {
obj[v.prop] = v.initValue
}
})
this.formData = obj
},
},
components: { SearchFormItem },
}
</script>
<style lang="scss" scoped>
.form-box {
// display: flex;
margin-top: 10px;
.btn-box {
display: flex;
height: 38px;
}
.el-form {
display: flex;
flex-wrap: wrap;
/deep/ .el-form-item__label {
margin-bottom: 10px;
flex-shrink: 0;
color: #000;
}
.el-form-item {
margin-bottom: 0;
// display: flex;
&.is-error {
margin-bottom: 25px;
}
}
// el-input宽度
/deep/ .form-item {
.el-input {
width: 220px !important;
}
}
}
}
</style>
src/components/SearchForm.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-03-12 14:55:59 * @Date: 2024-03-12 14:55:59
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-03-12 16:14:30 * @LastEditTime: 2024-03-14 08:59:05
--> -->
<!-- /** <!-- /**
* 搜索栏公共组件 * 搜索栏公共组件
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<template> <template>
<div class="search-form-box"> <div class="search-form-box">
<el-form :model="formData" ref="formRef" :inline="true"> <el-form :model="formData" ref="formRef" :inline="true">
<el-row> <!-- <el-row>
<el-col <el-col
:xs="24" :xs="24"
:sm="12" :sm="12"
...@@ -21,17 +21,19 @@ ...@@ -21,17 +21,19 @@
:xl="4" :xl="4"
v-for="(item, index) in formOptions" v-for="(item, index) in formOptions"
:key="newKeys[index]" :key="newKeys[index]"
> > -->
<el-form-item <el-form-item
:prop="item.prop" v-for="(item, index) in formOptions"
:label="item.label" :key="newKeys[index]"
:rules="item.rules" :prop="item.prop"
@keyup.enter.native="onSearch" :label="item.label"
> :rules="item.rules"
<SearchFormItem v-model="formData[item.prop]" :itemOptions="item" /> @keyup.enter.native="onSearch"
</el-form-item> >
</el-col> <SearchFormItem v-model="formData[item.prop]" :itemOptions="item" />
</el-row> </el-form-item>
<!-- </el-col>
</el-row> -->
<!-- 自定义插槽，可用于特殊表单块 --> <!-- 自定义插槽，可用于特殊表单块 -->
<slot></slot> <slot></slot>
...@@ -188,6 +190,7 @@ export default { ...@@ -188,6 +190,7 @@ export default {
// } // }
} }
.el-form { .el-form {
display: flex;
/deep/ .el-form-item__label { /deep/ .el-form-item__label {
// padding-right: 0; // padding-right: 0;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -203,16 +206,19 @@ export default { ...@@ -203,16 +206,19 @@ export default {
} }
// el-input宽度 // el-input宽度
/deep/ .form-item { /deep/ .form-item {
> .el-input:not(.el-date-editor) { .el-input {
max-width: 220px; width: 220px !important;
} }
// > .el-input:not(.el-date-editor) {
// max-width: 220px;
// }
} }
/deep/ .el-select { // /deep/ .el-select {
max-width: 220px; // max-width: 220px;
} // }
/deep/ .el-cascader { // /deep/ .el-cascader {
max-width: 200px; // max-width: 200px;
} // }
} }
} }
</style> </style>
src/components/SearchFormItem.vue
...@@ -78,7 +78,6 @@ ...@@ -78,7 +78,6 @@
v-on="bindEvents" v-on="bindEvents"
:type="itemOptions.type" :type="itemOptions.type"
clearable clearable
value-format="yyyy-MM-dd"
placeholder="请选择日期" placeholder="请选择日期"
style="width: 300px" style="width: 300px"
></el-date-picker> ></el-date-picker>
......
src/components/TableConfig.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-03-11 14:53:40 * @Date: 2024-03-11 14:53:40
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-03-12 15:02:11 * @LastEditTime: 2024-03-14 09:46:17
--> -->
<!-- 示例 <!-- 示例
columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => { columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => {
...@@ -71,10 +71,8 @@ ...@@ -71,10 +71,8 @@
class="btn" class="btn"
v-for="items in item.actionButtons" v-for="items in item.actionButtons"
:key="items.title" :key="items.title"
:type="items.type" v-bind="items"
@click="item.callback(scope.row, items.title)" @click="item.callback(scope.row, items.title)"
:icon="items.icon"
:circle="items.circle"
><span v-if="!items.circle">{{ items.title }}</span></el-button ><span v-if="!items.circle">{{ items.title }}</span></el-button
> >
</template> </template>
...@@ -92,8 +90,8 @@ ...@@ -92,8 +90,8 @@
<slot :name="item.__slotName" :data="scope"></slot> <slot :name="item.__slotName" :data="scope"></slot>
</template> </template>
<!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用--> <!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用-->
<template v-if="item.collectionType"> <template v-else-if="item.collectionType" #default="scope">
<span></span> <span> {{ handleToText(item, scope.row[item.prop]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
...@@ -209,6 +207,11 @@ export default { ...@@ -209,6 +207,11 @@ export default {
this.queryData() this.queryData()
}, },
methods: { methods: {
handleToText(item, state) {
console.log(item, state)
const obj = item.options.find((v) => v.value === state) || {}
return obj['label']
},
/** /**
* 切换分页数量 * 切换分页数量
* @param { Number } pageSize 页数 * @param { Number } pageSize 页数
...@@ -239,7 +242,6 @@ export default { ...@@ -239,7 +242,6 @@ export default {
// param.sortOrder = this.order.sortOrder // param.sortOrder = this.order.sortOrder
// } // }
let result = null let result = null
console.log('param', param)
try { try {
switch (this.query.method) { switch (this.query.method) {
case 'get': case 'get':
......
src/components/onlyOffice/demo.vue
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
document: { document: {
fileType: 'doc', fileType: 'doc',
// 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），这项如果最开始只是先试用，可以先给个空字符串 // 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），这项如果最开始只是先试用，可以先给个空字符串
key: '', key: '737bb9e67f',
// 文件名 // 文件名
title: 'text.docx', title: 'text.docx',
//相关权限 //相关权限
......
src/router/index.js
...@@ -7,240 +7,249 @@ Vue.use(VueRouter) ...@@ -7,240 +7,249 @@ Vue.use(VueRouter)
// 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ### // 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ###
const originalPush = VueRouter.prototype.push const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err) return originalPush.call(this, location).catch((err) => err)
} }
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'home', name: 'home',
redirect: '/main', redirect: '/main',
// component: Home // component: Home
}, },
{ {
path: '/main', path: '/main',
name: 'main', name: 'main',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Main/index.vue'), component: () =>
children: [ import(/* webpackChunkName: "about" */ '../views/Main/index.vue'),
{ children: [
path: '/main/archiEleList',//架构元素管理 {
name: 'archiEleList', path: '/main/archiEleList', //架构元素管理
component: () => import('@/views/archi-ele-list/index.vue'), name: 'archiEleList',
}, component: () => import('@/views/archi-ele-list/index.vue'),
{ },
path: '/main/archi-ele-rela',//架构元素关系管理 {
name: 'archi-ele-rela', path: '/main/archi-ele-rela', //架构元素关系管理
component: () => import('@/views/archiEleRela/index.vue'), name: 'archi-ele-rela',
}, component: () => import('@/views/archiEleRela/index.vue'),
{ },
path: '/main/archi-view-config',//架构视图配置 {
name: 'archi-view-config', path: '/main/archi-view-config', //架构视图配置
component: () => import('@/views/archiViewConfig/index.vue'), name: 'archi-view-config',
}, component: () => import('@/views/archiViewConfig/index.vue'),
{ },
path: '/main/meta-model-dic',//元模型字典管理 {
name: 'meta-model-dic', path: '/main/meta-model-dic', //元模型字典管理
component: () => import('@/views/metaModelDic/index.vue'), name: 'meta-model-dic',
}, component: () => import('@/views/metaModelDic/index.vue'),
{ },
path: '/main/busiAssetslist',//业务架构资产管理 {
name: 'busiAssetslist', path: '/main/busiAssetslist', //业务架构资产管理
component: () => import('@/views/busi-assets-list/index.vue'), name: 'busiAssetslist',
}, component: () => import('@/views/busi-assets-list/index.vue'),
// { },
// path: '/main/YuanMoXingGuanLiCanvas',//元模型管理画布 // {
// name: 'YuanMoXingGuanLiCanvas', // path: '/main/YuanMoXingGuanLiCanvas',//元模型管理画布
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'), // name: 'YuanMoXingGuanLiCanvas',
// }, // component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
{ // },
path: '/main/doc-demo',//在线文档编制 {
name: 'doc-demo', path: '/main/doc-demo', //在线文档编制
component: () => import('@/views/docDemo/index.vue'), name: 'doc-demo',
}, component: () => import('@/views/docDemo/index.vue'),
{ },
path: '/main/metaModelList',//元模型管理 {
name: 'metaModelList', path: '/main/metaModelList', //元模型管理
component: () => import('@/views/meta-model-list/index.vue'), name: 'metaModelList',
}, component: () => import('@/views/meta-model-list/index.vue'),
{ },
path: '/main/metaModelListDetails',//元模型管理详情 {
name: 'metaModelListDetails', path: '/main/metaModelListDetails', //元模型管理详情
component: () => import('@/views/meta-model-list/details.vue'), name: 'metaModelListDetails',
}, component: () => import('@/views/meta-model-list/details.vue'),
{ },
path: '/main/techPoliticsFabric',//技术政策结构化 {
name: 'techPoliticsFabric', path: '/main/techPoliticsFabric', //技术政策结构化
component: () => import('@/views/tech-politics-fabric/index.vue'), name: 'techPoliticsFabric',
}, component: () => import('@/views/tech-politics-fabric/index.vue'),
{ },
path: '/main/techPoliticsRelativeUse',//技术政策库关联使用 {
name: 'techPoliticsRelativeUse', path: '/main/techPoliticsRelativeUse', //技术政策库关联使用
component: () => import('@/views/tech-politics-relative-use/index.vue'), name: 'techPoliticsRelativeUse',
}, component: () => import('@/views/tech-politics-relative-use/index.vue'),
{ },
path: '/main/reportTemplateFabric',//报告模板结构化 {
name: 'reportTemplateFabric', path: '/main/reportTemplateFabric', //报告模板结构化
component: () => import('@/views/report-template-fabric/index.vue'), name: 'reportTemplateFabric',
}, component: () => import('@/views/report-template-fabric/index.vue'),
{ },
path: '/main/typicalExampleManage',//典型案例库管理 {
name: 'typicalExampleManage', path: '/main/typicalExampleManage', //典型案例库管理
component: () => import('@/views/typical-example-manage/index.vue'), name: 'typicalExampleManage',
}, component: () => import('@/views/typical-example-manage/index.vue'),
{ },
path: '/main/typicalExampleRelativeUse',//典型案例库关联使用 {
name: 'typicalExampleRelativeUse', path: '/main/typicalExampleRelativeUse', //典型案例库关联使用
component: () => import('@/views/typical-example-relative-use/index.vue'), name: 'typicalExampleRelativeUse',
}, component: () =>
{ import('@/views/typical-example-relative-use/index.vue'),
path: '/main/totalArchiPropertyDocument',//总体架构资产文档库 },
name: 'totalArchiPropertyDocument', {
component: () => import('@/views/total-archi-property-document/index.vue'), path: '/main/totalArchiPropertyDocument', //总体架构资产文档库
}, name: 'totalArchiPropertyDocument',
// { component: () =>
// path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格 import('@/views/total-archi-property-document/index.vue'),
// name: 'YuanMoXingGuanLiTable', },
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'), // {
// }, // path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格
{ // name: 'YuanMoXingGuanLiTable',
path: '/main/etp-Manage',//专家人才库 // component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'),
name: 'etp-Manage', // },
component: () => import('@/views/etpManage/index.vue'), {
}, path: '/main/etp-Manage', //专家人才库
{ name: 'etp-Manage',
path: '/main/reportTemplateRelativeUse',//报告模板关联使用 component: () => import('@/views/etpManage/index.vue'),
name: 'reportTemplateRelativeUse', },
component: () => import('@/views/report-template-relative-use/index.vue'), {
}, path: '/main/reportTemplateRelativeUse', //报告模板关联使用
{ name: 'reportTemplateRelativeUse',
path: '/main/archiViewManage',//架构视图管理 component: () =>
name: 'archiViewManage', import('@/views/report-template-relative-use/index.vue'),
component: () => import('@/views/archi-view-manage/index.vue'), },
}, {
{ path: '/main/archiViewManage', //架构视图管理
path: '/main/archiViewManageDetails',//架构视图管理详情 name: 'archiViewManage',
name: 'archiViewManageDetails', component: () => import('@/views/archi-view-manage/index.vue'),
component: () => import('@/views/archi-view-manage/details.vue'), },
}, {
{ path: '/main/archiViewManageDetails', //架构视图管理详情
path: '/main/archiAssetManage/',//总体架构资产管理 name: 'archiViewManageDetails',
name: 'archiAssetManage', component: () => import('@/views/archi-view-manage/details.vue'),
component: () => import('@/views/archi-asset-manage/index.vue'), },
}, {
{ path: '/main/archiAssetManage/', //总体架构资产管理
path: '/main/comCenterServeList/',//企业中台服务清单 name: 'archiAssetManage',
name: 'comCenterServeList', component: () => import('@/views/archi-asset-manage/index.vue'),
component: () => import('@/views/comCenterServeList/index.vue'), },
}, {
{ path: '/main/comCenterServeList/', //企业中台服务清单
path: '/main/currentAssetsList',//现状架构资产管理 name: 'comCenterServeList',
name: 'currentAssetsList', component: () => import('@/views/comCenterServeList/index.vue'),
component: () => import('@/views/current-assets-list/index.vue'), },
}, {
{ path: '/main/currentAssetsList', //现状架构资产管理
path: '/main/logManage',//日志管理 name: 'currentAssetsList',
name: 'logManage', component: () => import('@/views/current-assets-list/index.vue'),
component: () => import('@/views/log-manage/index.vue'), },
}, {
{ path: '/main/logManage', //日志管理
path: '/main/archiEvoluteLine',//架构演进路线资产管理 name: 'logManage',
name: 'archiEvoluteLine', component: () => import('@/views/log-manage/index.vue'),
component: () => import('@/views/archi-evolute-line/index.vue'), },
}, {
{ path: '/main/archiEvoluteLine', //架构演进路线资产管理
path: '/main/archiIntelligenceSearch',//总体架构资产智能搜索 name: 'archiEvoluteLine',
name: 'archiIntelligenceSearch', component: () => import('@/views/archi-evolute-line/index.vue'),
component: () => import('@/views/archi-intelligence-search/index.vue'), },
}, {
{ path: '/main/archiIntelligenceSearch', //总体架构资产智能搜索
path: '/main/archiAssetVisualShow',//总体架构资产可视化展示 name: 'archiIntelligenceSearch',
name: 'archiAssetVisualShow', component: () => import('@/views/archi-intelligence-search/index.vue'),
component: () => import('@/views/archiAssetVisualShow/index.vue'), },
}, {
{ path: '/main/archiAssetVisualShow', //总体架构资产可视化展示
path: '/main/systemInfoManage',//系统信息管理 name: 'archiAssetVisualShow',
name: 'systemInfoManage', component: () => import('@/views/archiAssetVisualShow/index.vue'),
component: () => import('@/views/systemInfoManage/index.vue'), },
}, {
{ path: '/main/systemInfoManage', //系统信息管理
path: '/main/projectInfoManage',//项目信息管理 name: 'systemInfoManage',
name: 'projectInfoManage', component: () => import('@/views/systemInfoManage/index.vue'),
component: () => import('@/views/projectInfoManage/index.vue'), },
}, {
{ path: '/main/projectInfoManage', //项目信息管理
path: '/main/systemArchiViewDesign',//系统架构视图设计 name: 'projectInfoManage',
name: 'systemArchiViewDesign', component: () => import('@/views/projectInfoManage/index.vue'),
component: () => import('@/views/systemArchiViewDesign/index.vue'), },
}, {
{ path: '/main/systemArchiViewDesign', //系统架构视图设计
path: '/main/systemArchiViewDesignDetails',//系统架构视图设计详情 name: 'systemArchiViewDesign',
name: 'systemArchiViewDesignDetails', component: () => import('@/views/systemArchiViewDesign/index.vue'),
component: () => import('@/views/systemArchiViewDesign/details.vue'), },
}, {
{ path: '/main/systemArchiViewDesignDetails', //系统架构视图设计详情
path: '/main/documentEdit',//文档编辑 name: 'systemArchiViewDesignDetails',
name: 'documentEdit', component: () => import('@/views/systemArchiViewDesign/details.vue'),
component: () => import('@/views/documentEdit/index.vue'), },
}, {
{ path: '/main/documentEdit', //文档编辑
path: '/main/summaryArchiDesign',//概设阶段视图设计 name: 'documentEdit',
name: 'summaryArchiDesign', component: () => import('@/views/documentEdit/index.vue'),
component: () => import('@/views/summaryArchiDesign/index.vue'), },
}, {
{ path: '/main/summaryArchiDesign', //概设阶段视图设计
path: '/main/summaryArchiDesignDetails',//概设阶段视图设计详情 name: 'summaryArchiDesign',
name: 'summaryArchiDesignDetails', component: () => import('@/views/summaryArchiDesign/index.vue'),
component: () => import('@/views/summaryArchiDesign/details.vue'), },
}, {
{ path: '/main/summaryArchiDesignDetails', //概设阶段视图设计详情
path: '/main/otherArchiDesign',//其他视图设计 name: 'summaryArchiDesignDetails',
name: 'otherArchiDesign', component: () => import('@/views/summaryArchiDesign/details.vue'),
component: () => import('@/views/otherArchiDesign/index.vue'), },
}, {
{ path: '/main/otherArchiDesign', //其他视图设计
path: '/main/otherArchiDesignDetails',//其他视图设计详情 name: 'otherArchiDesign',
name: 'otherArchiDesignDetails', component: () => import('@/views/otherArchiDesign/index.vue'),
component: () => import('@/views/otherArchiDesign/details.vue'), },
}, {
{ path: '/main/otherArchiDesignDetails', //其他视图设计详情
path: '/main/reviewSituation',//评审情况(概要设计) name: 'otherArchiDesignDetails',
name: 'reviewSituation', component: () => import('@/views/otherArchiDesign/details.vue'),
component: () => import('@/views/reviewSituation/index.vue'), },
}, {
{ path: '/main/reviewSituation', //评审情况(概要设计)
path: '/main/reviewSituationDetails',//评审情况(概要设计)，详情 name: 'reviewSituation',
name: 'reviewSituationDetails', component: () => import('@/views/reviewSituation/index.vue'),
component: () => import('@/views/reviewSituation/details.vue'), },
}, {
{ path: '/main/reviewSituationDetails', //评审情况(概要设计)，详情
path: '/main/reviewArchiFollowCheck',//概设架构遵从审查 name: 'reviewSituationDetails',
name: 'reviewArchiFollowCheck', component: () => import('@/views/reviewSituation/details.vue'),
component: () => import('@/views/reviewArchiFollowCheck/index.vue'), },
}, {
{ path: '/main/reviewArchiFollowCheck', //概设架构遵从审查
path: '/main/reviewArchiFollowCheckDetails',//概设架构遵从审查，详情 name: 'reviewArchiFollowCheck',
name: 'reviewArchiFollowCheckDetails', component: () => import('@/views/reviewArchiFollowCheck/index.vue'),
component: () => import('@/views/reviewArchiFollowCheck/details.vue'), },
}, {
{ path: '/main/reviewArchiFollowCheckDetails', //概设架构遵从审查，详情
path: '/main/reviewArchiPoliticeCheck',//概设架构政策审查 name: 'reviewArchiFollowCheckDetails',
name: 'reviewArchiPoliticeCheck', component: () => import('@/views/reviewArchiFollowCheck/details.vue'),
component: () => import('@/views/reviewArchiPoliticeCheck/index.vue'), },
}, {
{ path: '/main/reviewArchiPoliticeCheck', //概设架构政策审查
path: '/main/reviewArchiPoliticeCheckDetails',//概设架构政策审查，详情 name: 'reviewArchiPoliticeCheck',
name: 'reviewArchiPoliticeCheckDetails', component: () => import('@/views/reviewArchiPoliticeCheck/index.vue'),
component: () => import('@/views/reviewArchiPoliticeCheck/details.vue'), },
}, {
] path: '/main/reviewArchiPoliticeCheckDetails', //概设架构政策审查，详情
} name: 'reviewArchiPoliticeCheckDetails',
component: () => import('@/views/reviewArchiPoliticeCheck/details.vue'),
},
{
path: '/main/batchPlanManagement', //批次计划管理
name: 'batchPlanManagement',
component: () => import('@/views/batchPlanManagement/index.vue'),
},
],
},
] ]
const router = new VueRouter({ const router = new VueRouter({
routes routes,
}) })
export default router; export default router
src/styles/elementui.scss 0 → 100644
$color-primary: #0d867f;
/deep/ .el-dialog__header {
background-color: $color-primary;
text-align: left;
padding: 10px 20px;
}
/deep/ .el-dialog__headerbtn {
top: 14px;
}
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
/deep/ .el-dialog__headerbtn:focus .el-dialog__close,
/deep/ .el-dialog__headerbtn:hover .el-dialog__close {
color: #fff;
}
src/utils/dictionary.js 0 → 100644
// 审批状态
export const approvalStatusOptions = [
{ label: '新建', value: 1 },
{ label: '审批中', value: 2 },
{ label: '审批通过', value: 3 },
{ label: '驳回', value: 4 },
]
src/views/Main/index.vue
<template> <template>
<div class="main"> <div class="main">
<div class="top_menu_container"> <div class="top_menu_container">
<div class="logo_title_container"> <div class="logo_title_container">
<div class="left_container"> <div class="left_container">
<img src="@/assets/main/system_logo.png" alt="" class="system_logo"> <img src="@/assets/main/system_logo.png" alt="" class="system_logo" />
<!-- <img src="@/assets/system_logo.png" alt="" class="system_logo" @click="jumpPage('在线文档编制')"> --> <!-- <img src="@/assets/system_logo.png" alt="" class="system_logo" @click="jumpPage('在线文档编制')"> -->
<div class="logo_title"> <div class="logo_title">数字化架构设计与管控微应用</div>
数字化架构设计与管控微应用 </div>
</div> <div class="operate_menu">
</div> <div class="operate_menu_item">
<div class="operate_menu"> <img src="@/assets/main/unit.png" alt="" />
<div class="operate_menu_item"> <p class="operate_title">XXXX公司</p>
<img src="@/assets/main/unit.png" alt=""> </div>
<p class="operate_title">XXXX公司</p> <div class="line"></div>
</div> <div class="operate_menu_item">
<div class="line"></div> <img src="@/assets/main/admin.png" alt="" />
<div class="operate_menu_item"> <p class="operate_title">管理员</p>
<img src="@/assets/main/admin.png" alt=""> </div>
<p class="operate_title">管理员</p> <div class="line"></div>
</div> <div class="operate_menu_item">
<div class="line"></div> <img src="@/assets/main/exit.png" alt="" />
<div class="operate_menu_item"> <p class="operate_title">退出</p>
<img src="@/assets/main/exit.png" alt=""> </div>
<p class="operate_title">退出</p> </div>
</div> </div>
</div> <div class="menu_container">
</div> <el-popover
<div class="menu_container"> placement="bottom"
<el-popover width="420"
placement="bottom" class="menu_item"
width="420" style="margin-right: 80px; cursor: pointer; position: relative"
class="menu_item" v-model="visible1"
style="margin-right: 80px;cursor: pointer;position: relative;" trigger="hover"
v-model="visible1" >
trigger="hover"> <div slot="reference">
<div slot="reference"> <img
<img class="menu_icon" src="@/assets/main/4icon_default.png" alt="" /> class="menu_icon"
<img class="menu_icon_active" src="@/assets/main/4icon_press.png" alt="" /> src="@/assets/main/4icon_default.png"
alt=""
/>
<img
class="menu_icon_active"
src="@/assets/main/4icon_press.png"
alt=""
/>
<span class="menu_title">架构全景大屏及智能驾驶舱</span> <span class="menu_title">架构全景大屏及智能驾驶舱</span>
<p class="under_line"></p> <p class="under_line"></p>
</div> </div>
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<div class="menu_1_item_title"> <div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt=""> <img src="@/assets/main/2img.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">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px;">XX网数字化项目建设分析</span> <span style="margin-left: 5px">XX网数字化项目建设分析</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle">
<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>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">智能驾驶舱</span>
</div>
</div> <div class="menu_1_item_subtitle">
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> <img src="@/assets/main/3img.png" alt="" />
<div class="menu_1_item"> <span style="margin-left: 5px">管理智能驾驶舱</span>
<div class="menu_1_item_title"> </div>
<img src="@/assets/main/2img.png" alt=""> <div class="menu_1_item_subtitle">
<span style="margin-left: 5px;">智能驾驶舱</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">业务智能驾驶舱</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">项目智能驾驶舱</span>
</div>
</div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="440"
class="menu_item"
style="margin-right: 80px; cursor: pointer; position: relative"
v-model="visible2"
trigger="hover"
>
<div slot="reference">
<img
class="menu_icon"
src="@/assets/main/1icon_default.png"
alt=""
/>
<img
class="menu_icon_active"
src="@/assets/main/1icon_press.png"
alt=""
/>
<div class="menu_1_item_subtitle"> <span class="menu_title">总体架构资产设计与维护</span>
<img src="@/assets/main/3img.png" alt=""> <p class="under_line"></p>
<span style="margin-left: 5px;">管理智能驾驶舱</span> </div>
</div> <div class="menu_1_container">
<div class="menu_1_item_subtitle"> <div class="menu_1_item">
<img src="@/assets/main/3img.png" alt=""> <div class="menu_1_item_title">
<span style="margin-left: 5px;">业务智能驾驶舱</span> <img src="@/assets/main/2img.png" alt="" />
</div> <span style="margin-left: 5px">架构元模型管理</span>
<div class="menu_1_item_subtitle"> </div>
<img src="@/assets/main/3img.png" alt=""> <div
<span style="margin-left: 5px;">项目智能驾驶舱</span> class="menu_1_item_subtitle"
</div> @click="
</div> jumpPage(
</div> '总体架构资产设计与维护',
</el-popover> '架构元模型管理',
<el-popover '架构元素管理',
placement="bottom" )
width="440" "
class="menu_item" >
style="margin-right: 80px;cursor: pointer;position: relative;" <img src="@/assets/main/3img.png" alt="" />
v-model="visible2" <span style="margin-left: 5px">架构元素管理</span>
trigger="hover"> </div>
<div slot="reference"> <div
<img class="menu_icon" src="@/assets/main/1icon_default.png" alt="" /> class="menu_1_item_subtitle"
<img class="menu_icon_active" src="@/assets/main/1icon_press.png" alt="" /> @click="
jumpPage(
'总体架构资产设计与维护',
'架构元模型管理',
'架构元素关系管理',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">架构元素关系管理</span>
</div>
<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"
@click="
jumpPage(
'总体架构资产设计与维护',
'架构元模型管理',
'架构视图配置',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">架构视图配置</span>
</div>
<div
class="menu_1_item_subtitle"
@click="
jumpPage(
'总体架构资产设计与维护',
'架构元模型管理',
'元模型字典管理',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">元模型字典管理</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">总体架构资产维护</span>
</div>
<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"
@click="
jumpPage(
'总体架构资产设计与维护',
'总体架构资产维护',
'架构视图管理',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">架构视图管理</span>
</div>
<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"
@click="
jumpPage(
'总体架构资产设计与维护',
'总体架构资产维护',
'现状架构资产管理',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">现状架构资产管理</span>
</div>
<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"
@click="
jumpPage(
'总体架构资产设计与维护',
'总体架构资产维护',
'总体架构资产可视化展示',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">总体架构资产可视化展示</span>
</div>
<div
class="menu_1_item_subtitle"
@click="
jumpPage(
'总体架构资产设计与维护',
'总体架构资产维护',
'总体架构资产智能搜索',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">总体架构资产智能搜索</span>
</div>
</div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="1100"
class="menu_item"
v-model="visible3"
style="margin-right: 80px; cursor: pointer; position: relative"
trigger="hover"
>
<div slot="reference">
<img
class="menu_icon"
src="@/assets/main/2icon_default.png"
alt=""
/>
<img
class="menu_icon_active"
src="@/assets/main/2icon_press.png"
alt=""
/>
<span class="menu_title">总体架构资产设计与维护</span> <span class="menu_title">系统架构设计与管控</span>
<p class="under_line"></p> <p class="under_line"></p>
</div> </div>
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<div class="menu_1_item_title"> <div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt=""> <img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px;">架构元模型管理</span> <span style="margin-left: 5px">系统架构资产管理</span>
</div> </div>
<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" @click="jumpPage('总体架构资产设计与维护', '架构元模型管理', '架构元素关系管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">架构元素关系管理</span>
</div>
<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" @click="jumpPage('总体架构资产设计与维护', '架构元模型管理', '架构视图配置')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">架构视图配置</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构元模型管理', '元模型字典管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">元模型字典管理</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="">
<span style="margin-left: 5px;">总体架构资产维护</span>
</div>
<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" @click="jumpPage('总体架构资产设计与维护', '总体架构资产维护', '架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">架构视图管理</span>
</div>
<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" @click="jumpPage('总体架构资产设计与维护', '总体架构资产维护', '现状架构资产管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">现状架构资产管理</span>
</div>
<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" @click="jumpPage('总体架构资产设计与维护', '总体架构资产维护', '总体架构资产可视化展示')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">总体架构资产可视化展示</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '总体架构资产维护', '总体架构资产智能搜索')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">总体架构资产智能搜索</span>
</div>
</div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="1100"
class="menu_item"
v-model="visible3"
style="margin-right: 80px;cursor: pointer;position: relative;"
trigger="hover">
<div slot="reference">
<img class="menu_icon" src="@/assets/main/2icon_default.png" alt="" />
<img class="menu_icon_active" src="@/assets/main/2icon_press.png" alt="" />
<span class="menu_title">系统架构设计与管控</span> <div
<p class="under_line"></p> class="menu_1_item_subtitle"
</div> @click="
<div class="menu_1_container"> jumpPage(
<div class="menu_1_item"> '系统架构设计与管控',
<div class="menu_1_item_title"> '系统架构图设计',
<img src="@/assets/main/2img.png" alt=""> '系统信息管理',
<span style="margin-left: 5px;">系统架构资产管理</span> )
</div> "
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">系统信息管理</span>
</div>
<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"
@click="
jumpPage(
'系统架构设计与管控',
'系统架构图设计',
'系统架构资产维护',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">系统架构资产维护</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">系统架构设计</span>
</div>
<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"
@click="
jumpPage(
'系统架构设计与管控',
'系统架构设计',
'概设阶段架构设计',
)
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">概设阶段架构设计</span>
</div>
<div
class="menu_1_item_subtitle"
@click="
jumpPage('系统架构设计与管控', '系统架构设计', '其他视图设计')
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">其他视图设计</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">系统架构管控要求</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '系统架构图设计', '系统信息管理')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">系统信息管理</span> @click="
</div> jumpPage(
<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" @click="jumpPage('系统架构设计与管控', '系统架构图设计', '系统架构资产维护')"> "
<img src="@/assets/main/3img.png" alt=""> >
<span style="margin-left: 5px;">系统架构资产维护</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">评审情况(概要设计)</span>
</div> </div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> <div
<div class="menu_1_item"> class="menu_1_item_subtitle"
<div class="menu_1_item_title"> @click="
<img src="@/assets/main/2img.png" alt=""> jumpPage(
<span style="margin-left: 5px;">系统架构设计</span> '系统架构设计与管控',
</div> '系统架构管控要求',
<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" @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
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '系统架构设计', '其他视图设计')"> class="menu_1_item_subtitle"
<img src="@/assets/main/3img.png" alt=""> @click="
<span style="margin-left: 5px;">其他视图设计</span> jumpPage(
</div> '系统架构设计与管控',
</div> '系统架构管控要求',
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> '概设架构政策审查',
<div class="menu_1_item"> )
<div class="menu_1_item_title"> "
<img src="@/assets/main/2img.png" alt=""> >
<span style="margin-left: 5px;">系统架构管控要求</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">概设架构政策审查</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">概要设计评审</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '系统架构管控要求', '评审情况(概要设计)')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">评审情况(概要设计)</span> @click="
</div> jumpPage('系统架构设计与管控', '概要设计评审', '批次计划管理')
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '系统架构管控要求', '概设架构遵从检查')"> "
<img src="@/assets/main/3img.png" alt=""> >
<span style="margin-left: 5px;">概设架构遵从检查</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">批次计划管理</span>
<div class="menu_1_item_subtitle" @click="jumpPage('系统架构设计与管控', '系统架构管控要求', '概设架构政策审查')"> </div>
<img src="@/assets/main/3img.png" alt=""> <div class="menu_1_item_subtitle">
<span style="margin-left: 5px;">概设架构政策审查</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">需求管理</span>
</div> </div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> <div class="menu_1_item_subtitle">
<div class="menu_1_item"> <img src="@/assets/main/3img.png" alt="" />
<div class="menu_1_item_title"> <span style="margin-left: 5px">概设材料审查</span>
<img src="@/assets/main/2img.png" alt=""> </div>
<span style="margin-left: 5px;">概要设计评审</span> <div class="menu_1_item_subtitle">
</div> <img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">概设材料意见编制</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">概设关联业务管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">概设评审基础管理</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">架构督查</span>
</div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle">
<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">
<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">
<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">
<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">
<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">
<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> <div class="menu_1_item_subtitle">
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> <img src="@/assets/main/3img.png" alt="" />
<div class="menu_1_item"> <span style="margin-left: 5px">技术政策审查</span>
<div class="menu_1_item_title"> </div>
<img src="@/assets/main/2img.png" alt=""> </div>
<span style="margin-left: 5px;">架构督查</span> </div>
</div> </el-popover>
<el-popover
placement="bottom"
width="220"
class="menu_item"
style="margin-right: 80px; cursor: pointer; position: relative"
v-model="visible4"
trigger="hover"
>
<div slot="reference">
<img
class="menu_icon"
src="@/assets/main/4icon_default.png"
alt=""
/>
<img
class="menu_icon_active"
src="@/assets/main/4icon_press.png"
alt=""
/>
<div class="menu_1_item_subtitle"> <span class="menu_title">架构资产服务与辅助分析</span>
<img src="@/assets/main/3img.png" alt=""> <p class="under_line"></p>
<span style="margin-left: 5px;">收集资料配置</span> </div>
</div> <div class="menu_1_container">
<div class="menu_1_item_subtitle"> <div class="menu_1_item">
<img src="@/assets/main/3img.png" alt=""> <div class="menu_1_item_title">
<span style="margin-left: 5px;">督查材料收集</span> <img src="@/assets/main/2img.png" alt="" />
</div> <span style="margin-left: 5px">架构资产服务与辅助分析</span>
<div class="menu_1_item_subtitle"> </div>
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">架构督查分析</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">督查通报管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">督查问颗整改</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">架构遵从检查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">技术政策审查</span>
</div>
</div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="220"
class="menu_item"
style="margin-right: 80px;cursor: pointer;position: relative;"
v-model="visible4"
trigger="hover">
<div slot="reference">
<img class="menu_icon" src="@/assets/main/4icon_default.png" alt="" />
<img class="menu_icon_active" src="@/assets/main/4icon_press.png" alt="" />
<span class="menu_title">架构资产服务与辅助分析</span> <div class="menu_1_item_subtitle">
<p class="under_line"></p> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">架构遵从符合度检查</span>
<div class="menu_1_container"> </div>
<div class="menu_1_item"> <div class="menu_1_item_subtitle">
<div class="menu_1_item_title"> <img src="@/assets/main/3img.png" alt="" />
<img src="@/assets/main/2img.png" alt=""> <span style="margin-left: 5px">技术政策符合度检查</span>
<span style="margin-left: 5px;">架构资产服务与辅助分析</span> </div>
</div> </div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="700"
v-model="visible5"
class="menu_item"
style="cursor: pointer; position: relative"
trigger="hover"
>
<div slot="reference">
<img
class="menu_icon"
src="@/assets/main/5icon_default.png"
alt=""
/>
<img
class="menu_icon_active"
src="@/assets/main/5icon_press.png"
alt=""
/>
<div class="menu_1_item_subtitle"> <span class="menu_title">架构知识库</span>
<img src="@/assets/main/3img.png" alt=""> <p class="under_line"></p>
<span style="margin-left: 5px;">架构遵从符合度检查</span> </div>
</div> <div class="menu_1_container">
<div class="menu_1_item_subtitle"> <div class="menu_1_item">
<img src="@/assets/main/3img.png" alt=""> <div class="menu_1_item_title">
<span style="margin-left: 5px;">技术政策符合度检查</span> <img src="@/assets/main/2img.png" alt="" />
</div> <span style="margin-left: 5px">专家人才库</span>
</div> </div>
</div>
</el-popover>
<el-popover
placement="bottom"
width="700"
v-model="visible5"
class="menu_item"
style="cursor: pointer;position: relative;"
trigger="hover">
<div slot="reference">
<img class="menu_icon" src="@/assets/main/5icon_default.png" alt="" />
<img class="menu_icon_active" src="@/assets/main/5icon_press.png" alt="" />
<span class="menu_title">架构知识库</span> <div
<p class="under_line"></p> class="menu_1_item_subtitle"
</div> @click="jumpPage('架构知识库', '专家人才库', '专家人才库管理')"
<div class="menu_1_container"> >
<div class="menu_1_item"> <img src="@/assets/main/3img.png" alt="" />
<div class="menu_1_item_title"> <span style="margin-left: 5px">专家人才库管理</span>
<img src="@/assets/main/2img.png" alt=""> </div>
<span style="margin-left: 5px;">专家人才库</span> </div>
</div> <img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">技术政策库</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '专家人才库', '专家人才库管理')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">专家人才库管理</span> @click="jumpPage('架构知识库', '技术政策库', '技术政策结构化')"
</div> >
</div> <img src="@/assets/main/3img.png" alt="" />
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> <span style="margin-left: 5px">技术政策结构化</span>
<div class="menu_1_item"> </div>
<div class="menu_1_item_title"> <div
<img src="@/assets/main/2img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">技术政策库</span> @click="
</div> jumpPage('架构知识库', '技术政策库', '技术政策库关联使用')
"
>
<img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">技术政策库关联使用</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">报告模板库</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '技术政策库', '技术政策结构化')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">技术政策结构化</span> @click="jumpPage('架构知识库', '报告模板库', '报告模板结构化')"
</div> >
<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
</div> class="menu_1_item_subtitle"
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> @click="
<div class="menu_1_item"> jumpPage('架构知识库', '报告模板库', '报告模板关联使用')
<div class="menu_1_item_title"> "
<img src="@/assets/main/2img.png" alt=""> >
<span style="margin-left: 5px;">报告模板库</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">报告模板关联使用</span>
</div>
</div>
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" />
<div class="menu_1_item">
<div class="menu_1_item_title">
<img src="@/assets/main/2img.png" alt="" />
<span style="margin-left: 5px">典型案例库</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '报告模板库', '报告模板结构化')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">报告模板结构化</span> @click="jumpPage('架构知识库', '典型案例库', '典型案例库管理')"
</div> >
<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
</div> class="menu_1_item_subtitle"
<img class="menu_1_item_line" src="@/assets/main/line.png" alt="" /> @click="
<div class="menu_1_item"> jumpPage('架构知识库', '典型案例库', '典型案例库关联使用')
<div class="menu_1_item_title"> "
<img src="@/assets/main/2img.png" alt=""> >
<span style="margin-left: 5px;">典型案例库</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">典型案例库关联使用</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '典型案例库管理')"> <div
<img src="@/assets/main/3img.png" alt=""> class="menu_1_item_subtitle"
<span style="margin-left: 5px;">典型案例库管理</span> @click="
</div> jumpPage('架构知识库', '典型案例库', '总体架构资产文档库')
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '典型案例库关联使用')"> "
<img src="@/assets/main/3img.png" alt=""> >
<span style="margin-left: 5px;">典型案例库关联使用</span> <img src="@/assets/main/3img.png" alt="" />
</div> <span style="margin-left: 5px">总体架构资产文档库</span>
<div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '总体架构资产文档库')"> </div>
<img src="@/assets/main/3img.png" alt=""> </div>
<span style="margin-left: 5px;">总体架构资产文档库</span> </div>
</div> </el-popover>
</div> </div>
</div> <el-breadcrumb separator="/">
</el-popover> <el-breadcrumb-item>{{ breadcrumb1 }}</el-breadcrumb-item>
</div> <el-breadcrumb-item>{{ breadcrumb2 }}</el-breadcrumb-item>
<el-breadcrumb separator="/"> <el-breadcrumb-item>{{ breadcrumb3 }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ breadcrumb1 }}</el-breadcrumb-item> </el-breadcrumb>
<el-breadcrumb-item>{{ breadcrumb2 }}</el-breadcrumb-item> </div>
<el-breadcrumb-item>{{ breadcrumb3 }}</el-breadcrumb-item> <div class="left_menu_and_drawio_container">
</el-breadcrumb> <!-- <div class="left_menu_container">
</div>
<div class="left_menu_and_drawio_container">
<!-- <div class="left_menu_container">
左边任务栏 左边任务栏
</div> --> </div> -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import $ from 'jquery'; import $ from 'jquery'
export default { export default {
components: { components: {},
data() {
}, return {
data() { visible1: false,
return { visible2: false,
visible1: false, visible3: false,
visible2: false, visible4: false,
visible3: false, visible5: false,
visible4: false, breadcrumb1: '总体架构资产设计与维护',
visible5: false, breadcrumb2: '架构元模型管理',
breadcrumb1: '总体架构资产设计与维护', breadcrumb3: '架构元素管理',
breadcrumb2: '架构元模型管理', }
breadcrumb3: '架构元素管理', },
}; mounted() {
}, $('.menu_item').hover(
mounted(){ function () {
$(".menu_item").hover(function() { $(this).find('.menu_title').css('color', '#0D867F')
$(this).find(".menu_title").css('color', '#0D867F'); $(this).find('.menu_icon').css('display', 'none')
$(this).find(".menu_icon").css('display', 'none'); $(this).find('.menu_icon_active').css('display', 'inline-block')
$(this).find(".menu_icon_active").css('display', 'inline-block'); $(this).find('.under_line').css('display', 'block')
$(this).find(".under_line").css('display', 'block'); },
function () {
$(this).find('.menu_title').css('color', '#666')
$(this).find('.menu_icon').css('display', 'inline-block')
$(this).find('.menu_icon_active').css('display', 'none')
$(this).find('.under_line').css('display', 'none')
},
)
},
methods: {
openDrawIO() {
// window.open(window.location.origin + '/drawio/index.html?id=23', '_self');//编辑
// window.open(window.location.origin + '/drawio/index.html', '_self');//新增
},
jumpPage(breadcrumb1_, breadcrumb2_, breadcrumb3_) {
this.breadcrumb1 = breadcrumb1_
this.breadcrumb2 = breadcrumb2_
this.breadcrumb3 = breadcrumb3_
}, function() { switch (breadcrumb3_) {
$(this).find(".menu_title").css('color', '#666'); case '架构元素管理':
$(this).find(".menu_icon").css('display', 'inline-block'); this.$router.push(
$(this).find(".menu_icon_active").css('display', 'none'); '/main/archiEleList',
$(this).find(".under_line").css('display', 'none'); () => {},
}) () => {},
}, )
methods: { this.visible2 = false
openDrawIO() { break
// window.open(window.location.origin + '/drawio/index.html?id=23', '_self');//编辑 case '架构元素关系管理':
// window.open(window.location.origin + '/drawio/index.html', '_self');//新增 this.$router.push(
}, '/main/archi-ele-rela',
jumpPage(breadcrumb1_, breadcrumb2_, breadcrumb3_) { () => {},
this.breadcrumb1 = breadcrumb1_; () => {},
this.breadcrumb2 = breadcrumb2_; )
this.breadcrumb3 = breadcrumb3_; this.visible2 = false
break
case '架构视图配置':
this.$router.push(
'/main/archi-view-config',
() => {},
() => {},
)
this.visible2 = false
break
case '元模型字典管理':
this.$router.push(
'/main/meta-model-dic',
() => {},
() => {},
)
this.visible2 = false
break
case '元模型管理':
this.$router.push(
'/main/metaModelList',
() => {},
() => {},
)
this.visible2 = false
break
case '架构资产管理':
this.$router.push(
'/main/busiAssetslist',
() => {},
() => {},
)
this.visible2 = false
break
case '架构视图管理':
this.$router.push(
'/main/archiViewManage',
() => {},
() => {},
)
this.visible2 = false
break
case '企业中台服务清单':
this.$router.push(
'/main/comCenterServeList',
() => {},
() => {},
)
this.visible2 = false
break
case '现状架构资产管理':
this.$router.push(
'/main/currentAssetsList',
() => {},
() => {},
)
this.visible2 = false
break
case '架构演进路线资产管理':
this.$router.push(
'/main/archiEvoluteLine',
() => {},
() => {},
)
this.visible2 = false
break
case '总体架构资产可视化展示':
this.$router.push(
'/main/archiAssetVisualShow',
() => {},
() => {},
)
this.visible2 = false
break
case '总体架构资产智能搜索':
this.$router.push(
'/main/archiIntelligenceSearch',
() => {},
() => {},
)
this.visible2 = false
break
case '在线文档编制':
this.$router.push(
'/main/doc-demo',
() => {},
() => {},
)
break
case '系统信息管理':
this.$router.push(
'/main/systemInfoManage',
() => {},
() => {},
)
this.visible3 = false
break
case '项目信息管理':
this.$router.push(
'/main/projectInfoManage',
() => {},
() => {},
)
this.visible3 = false
break
case '系统架构资产维护':
this.$router.push(
'/main/archiAssetManage',
() => {},
() => {},
)
this.visible3 = false
break
case '系统架构视图设计':
this.$router.push(
'/main/systemArchiViewDesign',
() => {},
() => {},
)
this.visible3 = false
break
switch(breadcrumb3_){ case '概设阶段架构设计':
case '架构元素管理': this.$router.push(
this.$router.push( '/main/archiEleList', () => {}, () => {} ); '/main/summaryArchiDesign',
this.visible2 = false; () => {},
break; () => {},
case '架构元素关系管理': )
this.$router.push( '/main/archi-ele-rela', () => {}, () => {} ); this.visible3 = false
this.visible2 = false; break
break; case '其他视图设计':
case '架构视图配置': this.$router.push(
this.$router.push( '/main/archi-view-config', () => {}, () => {} ); '/main/otherArchiDesign',
this.visible2 = false; () => {},
break; () => {},
case '元模型字典管理': )
this.$router.push( '/main/meta-model-dic', () => {}, () => {} ); this.visible3 = false
this.visible2 = false; break
break; case '评审情况(概要设计)':
case '元模型管理': this.$router.push(
this.$router.push( '/main/metaModelList', () => {}, () => {} ); '/main/reviewSituation',
this.visible2 = false; () => {},
break; () => {},
case '架构资产管理': )
this.$router.push( '/main/busiAssetslist', () => {}, () => {} ); this.visible3 = false
this.visible2 = false; break
break; case '概设架构遵从检查':
case '架构视图管理': this.$router.push(
this.$router.push( '/main/archiViewManage', () => {}, () => {} ); '/main/reviewArchiFollowCheck',
this.visible2 = false; () => {},
break; () => {},
case '企业中台服务清单': )
this.$router.push( '/main/comCenterServeList', () => {}, () => {} ); this.visible3 = false
this.visible2 = false; break
break; case '概设架构政策审查':
case '现状架构资产管理': this.$router.push(
this.$router.push( '/main/currentAssetsList', () => {}, () => {} ); '/main/reviewArchiPoliticeCheck',
this.visible2 = false; () => {},
break; () => {},
case '架构演进路线资产管理': )
this.$router.push( '/main/archiEvoluteLine', () => {}, () => {} ); this.visible3 = false
this.visible2 = false; break
break; case '技术政策结构化':
case '总体架构资产可视化展示': this.$router.push(
this.$router.push( '/main/archiAssetVisualShow', () => {}, () => {} ); '/main/techPoliticsFabric',
this.visible2 = false; () => {},
break; () => {},
case '总体架构资产智能搜索': )
this.$router.push( '/main/archiIntelligenceSearch', () => {}, () => {} ); this.visible5 = false
this.visible2 = false; break
break; case '技术政策库关联使用':
case '在线文档编制': this.$router.push(
this.$router.push( '/main/doc-demo', () => {}, () => {} ); '/main/techPoliticsRelativeUse',
break; () => {},
case '系统信息管理': () => {},
this.$router.push( '/main/systemInfoManage', () => {}, () => {} ); )
this.visible3 = false; this.visible5 = false
break; break
case '项目信息管理': case '报告模板结构化':
this.$router.push( '/main/projectInfoManage', () => {}, () => {} ); this.$router.push(
this.visible3 = false; '/main/reportTemplateFabric',
break; () => {},
case '系统架构资产维护': () => {},
this.$router.push( '/main/archiAssetManage', () => {}, () => {} ); )
this.visible3 = false; this.visible5 = false
break; break
case '系统架构视图设计': case '典型案例库管理':
this.$router.push( '/main/systemArchiViewDesign', () => {}, () => {} ); this.$router.push(
this.visible3 = false; '/main/typicalExampleManage',
break; () => {},
() => {},
case '概设阶段架构设计': )
this.$router.push( '/main/summaryArchiDesign', () => {}, () => {} ); this.visible5 = false
this.visible3 = false; break
break; case '典型案例库关联使用':
case '其他视图设计': this.$router.push(
this.$router.push( '/main/otherArchiDesign', () => {}, () => {} ); '/main/typicalExampleRelativeUse',
this.visible3 = false; () => {},
break; () => {},
case '评审情况(概要设计)': )
this.$router.push( '/main/reviewSituation', () => {}, () => {} ); this.visible5 = false
this.visible3 = false; break
break; case '总体架构资产文档库':
case '概设架构遵从检查': this.$router.push(
this.$router.push( '/main/reviewArchiFollowCheck', () => {}, () => {} ); '/main/totalArchiPropertyDocument',
this.visible3 = false; () => {},
break; () => {},
case '概设架构政策审查': )
this.$router.push( '/main/reviewArchiPoliticeCheck', () => {}, () => {} ); this.visible5 = false
this.visible3 = false; break
break; case '专家人才库管理':
case '技术政策结构化': this.$router.push(
this.$router.push( '/main/techPoliticsFabric', () => {}, () => {} ); '/main/etp-Manage',
this.visible5 = false; () => {},
break; () => {},
case '技术政策库关联使用': )
this.$router.push( '/main/techPoliticsRelativeUse', () => {}, () => {} ); this.visible5 = false
this.visible5 = false; break
break; case '报告模板关联使用':
case '报告模板结构化': this.$router.push(
this.$router.push( '/main/reportTemplateFabric', () => {}, () => {} ); '/main/reportTemplateRelativeUse',
this.visible5 = false; () => {},
break; () => {},
case '典型案例库管理': )
this.$router.push( '/main/typicalExampleManage', () => {}, () => {} ); this.visible5 = false
this.visible5 = false; break
break; case '批次计划管理':
case '典型案例库关联使用': this.$router.push(
this.$router.push( '/main/typicalExampleRelativeUse', () => {}, () => {} ); '/main/batchPlanManagement',
this.visible5 = false; () => {},
break; () => {},
case '总体架构资产文档库': )
this.$router.push( '/main/totalArchiPropertyDocument', () => {}, () => {} ); this.visible5 = false
this.visible5 = false; break
break; }
case '专家人才库管理': },
this.$router.push( '/main/etp-Manage', () => {}, () => {} ); },
this.visible5 = false; }
break;
case '报告模板关联使用':
this.$router.push( '/main/reportTemplateRelativeUse', () => {}, () => {} );
this.visible5 = false;
break;
}
}
}
}
</script> </script>
<style scoped> <style scoped>
.main{ .main {
height: 100%; height: 100%;
} }
.top_menu_container{ .top_menu_container {
/* margin-bottom: 20px; */ /* margin-bottom: 20px; */
height: 125px; height: 125px;
} }
.left_menu_and_drawio_container{ .left_menu_and_drawio_container {
display: flex; display: flex;
height: calc(100% - 178px); height: calc(100% - 178px);
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 30px 20px 20px 20px; margin: 30px 20px 20px 20px;
border-top: 6px solid #0D867F; border-top: 6px solid #0d867f;
box-shadow: 10px 10px 30px 30px rgba(201,226,225,1); box-shadow: 10px 10px 30px 30px rgba(201, 226, 225, 1);
} }
.el-breadcrumb{ .el-breadcrumb {
height: 30px; height: 30px;
margin-left: 20px; margin-left: 20px;
line-height: 30px; line-height: 30px;
} }
/* .left_menu_container{ /* .left_menu_container{
width: 6%; width: 6%;
} */ } */
.logo_title_container{ .logo_title_container {
height: 64px; height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: rgb(13,134,127); background-color: rgb(13, 134, 127);
color: #fff; color: #fff;
justify-content: space-between; justify-content: space-between;
} }
.left_container{ .left_container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.logo_title{ .logo_title {
font-weight: bold; font-weight: bold;
font-size: 25px; font-size: 25px;
} }
.system_logo{ .system_logo {
width: 42px; width: 42px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.operate_menu{ .operate_menu {
width: 350px; width: 350px;
height: 35px; height: 35px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
background-color: rgb(255,255,255,0.2); background-color: rgb(255, 255, 255, 0.2);
border-radius: 19px 19px 19px 19px; border-radius: 19px 19px 19px 19px;
margin-right: 24px; margin-right: 24px;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.line{ .line {
height: 16px; height: 16px;
border: 0.5px solid #fff; border: 0.5px solid #fff;
} }
.operate_title{ .operate_title {
margin-left: 6px; margin-left: 6px;
}
} .menu_title {
.menu_title{ font-size: 18px;
font-size: 18px; font-weight: bold;
font-weight: bold; color: #666;
color: #666; }
} .under_line {
.under_line{ position: absolute;
position: absolute; bottom: -25px;
bottom: -25px; left: 0;
left: 0; width: 100%;
width: 100%; height: 6px;
height: 6px; background-color: #0d867f;
background-color: #0D867F; display: none;
display: none; }
} .operate_menu_item {
.operate_menu_item{ display: flex;
display: flex; align-items: center;
align-items: center; cursor: pointer;
cursor: pointer; }
} /deep/ .is-leaf {
/deep/ .is-leaf{ background-color: rgb(245, 246, 250) !important;
background-color: rgb(245,246,250) !important; }
} .menu_icon {
.menu_icon{ width: 20px;
width: 20px; height: 20px;
height: 20px; position: absolute;
position: absolute; left: -25px;
left: -25px; top: 9%;
top: 9%; }
} .menu_icon_active {
.menu_icon_active{ width: 20px;
width: 20px; height: 20px;
height: 20px; position: absolute;
position: absolute; left: -25px;
left: -25px; top: 9%;
top: 9%; display: none;
display: none; }
} .menu_container {
.menu_container{ display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; height: 60px;
height: 60px; }
} .menu_1_container {
.menu_1_container{ display: flex;
display: flex; justify-content: space-around;
justify-content: space-around; }
} .menu_1_item_line {
.menu_1_item_line{ width: 1px;
width: 1px; height: 240px;
height: 240px; }
} .menu_1_item_title {
.menu_1_item_title{ color: #666;
color: #666; font-weight: bold;
font-weight: bold; font-size: 16px;
font-size: 16px; display: flex;
display: flex; align-items: center;
align-items: center; margin-bottom: 10px;
margin-bottom: 10px; }
} .menu_1_item_subtitle {
.menu_1_item_subtitle{ display: flex;
display: flex; align-items: center;
align-items: center; margin-bottom: 10px;
margin-bottom: 10px; cursor: pointer;
cursor: pointer; }
} .menu_1_item_subtitle:hover {
.menu_1_item_subtitle:hover{ color: #0d867f;
color: #0D867F; }
}
</style> </style>
src/views/batchPlanManagement/Add.vue 0 → 100644
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
>
<div>
<Form
@getData="getFormData"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false" size="mini">取 消</el-button>
<el-button type="primary" @click="handleImport" size="mini"
>提 交</el-button
>
</span></el-dialog
>
</template>
<script>
import Form from '@/components/Form.vue'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
data() {
return {}
},
components: {
Form,
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
rules: [],
},
{
label: '创建人', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
rules: [],
},
{
label: '创建时间', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '年度', // label文字
prop: 'planReviewDate', // 字段名
type: 'year',
valueFormat: 'yyyy',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '备注', // label文字
prop: 'planReviewDate', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
getFormData(formData) {},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
src/views/batchPlanManagement/index.vue 0 → 100644
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button
icon="el-icon-document-add"
type="primary"
size="medium"
plain
@click="fnAdd()"
>新增</el-button
>
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</list-page>
<!-- 新增弹窗 -->
<Add :visible.sync="visible" title="新增批次计划"></Add>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/components/TableConfig.vue'
import Add from './Add.vue'
import { getDianXingAnLiSelectData } from '@/api/index.js'
import { batchPlanManagement } from '@/api/interface'
import { approvalStatusOptions } from '@/utils/dictionary'
export default {
components: {
ListPage,
SearchForm,
TableConfig,
Add,
},
data() {
return {
constructionTypeOptions: [],
selectRows: [],
query: {
url: batchPlanManagement,
method: 'post',
queryParam: {},
},
visible: false,
}
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
]
},
columns() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '批次年度', prop: 'year' },
{ label: '批次名称', prop: 'batName', width: '300px' },
{
label: '计划评审日期',
width: '120px',
prop: 'planReviewDate',
},
{
label: '状态',
prop: 'state',
width: '120px',
collectionType: 'approvalStatusOptions',
options: approvalStatusOptions,
},
{ label: '备注', width: '100px', prop: 'remark' },
{ label: '创建人', prop: 'createMan' },
{ label: '创建时间', prop: 'createTime', width: '120px' },
{
label: '操作',
type: 'operation',
width: '360px',
actionButtons: [
{
title: '修改',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
{
title: '提交',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'primary',
plain: true,
},
{
title: '审批',
size: 'mini',
icon: 'el-icon-s-check',
type: 'primary',
plain: true,
},
],
callback: (row, title) => {
this.fnToDetailsTab('1')
},
},
]
},
},
created() {
console.log('batchPlanManagement', batchPlanManagement)
const params = {
key: 'build_type',
}
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
this.constructionTypeOptions = res.data
}
})
},
methods: {
// 表格勾选的数据
selectionChange(data) {
this.selectRows = data
},
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.visible = true
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
</style>
src/views/docDemo/index.vue
<template> <template>
<div class="wenDangDemo"> <div class="wenDangDemo">
<div id="placeholder"></div> <div id="placeholder"></div>
<div class="office" @click="gotoOffice"> <div class="office" @click="gotoOffice">编辑文档</div>
编辑文档 <!-- <div v-if='show' class='qualityManual-container-office'>
</div>
<!-- <div v-if='show' class='qualityManual-container-office'>
<only-Office :option='option' /> <only-Office :option='option' />
</div> --> </div> -->
</div> <Demo />
</div>
</template> </template>
<script> <script>
import onlyOffice from '@/components/onlyOffice' import onlyOffice from '@/components/onlyOffice'
import Demo from '@/components/onlyOffice/demo.vue'
export default { export default {
name: 'wenDangDemo', name: 'wenDangDemo',
components: { components: {
onlyOffice, Demo,
}, onlyOffice,
data() { },
return { data() {
config: { return {
"document": { config: {
"fileType": "docx", document: {
"key": "Khirz6zTPdfd7", fileType: 'docx',
"title": "new.docx", key: 'Khirz6zTPdfd7',
"url": "http://192.168.0.187:9999/example/editor?fileName=new.docx" title: 'new.docx',
}, url: 'http://192.168.0.187:9999/example/editor?fileName=new.docx',
"documentType": "word", },
'editorConfig': { documentType: 'word',
//语言：zh-CN简体中文/en英文 editorConfig: {
'lang': 'zh-CN', //语言：zh-CN简体中文/en英文
//阅读状态 view/edit lang: 'zh-CN',
'mode': 'view', //阅读状态 view/edit
'customization': { mode: 'view',
//是否显示插件 customization: {
'plugins': false, //是否显示插件
}, plugins: false,
"callbackUrl": "http://192.168.0.187:9999/url-to-callback.ashx" },
}, callbackUrl: 'http://192.168.0.187:9999/url-to-callback.ashx',
// "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR", },
}, // "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR",
//参考vabOnlyOffice组件参数配置 },
option: { //参考vabOnlyOffice组件参数配置
url: '', option: {
isEdit: '', url: '',
fileType: '', isEdit: '',
title: '', fileType: '',
lang: '', title: '',
isPrint: '', lang: '',
}, isPrint: '',
show: false, },
show: false,
}; }
}, },
methods: { methods: {
gotoOffice() { gotoOffice() {
let config = { let config = {
"document": { document: {
"fileType": "docx", fileType: 'docx',
"key": "", key: '',
// "key": "Khirz6zTPdfd7", // "key": "Khirz6zTPdfd7",
"title": "new.docx", title: 'new.docx',
// "url": "http://192.168.0.189:9999/example/editor?fileName=new.docx" // "url": "http://192.168.0.189:9999/example/editor?fileName=new.docx"
"url": "http://192.168.0.186:9001/example/editor?fileName=new.docx" url: 'http://192.168.0.186:9001/example/editor?fileName=new.docx',
}, },
"documentType": "word", documentType: 'word',
'editorConfig': { editorConfig: {
//语言：zh-CN简体中文/en英文 //语言：zh-CN简体中文/en英文
'lang': 'zh-CN', lang: 'zh-CN',
//阅读状态 view/edit //阅读状态 view/edit
'mode': 'edit', mode: 'edit',
'customization': { customization: {
//是否显示插件 //是否显示插件
'plugins': false, plugins: false,
}, },
"callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1", callbackUrl:
// "callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1", 'http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1',
}, // "callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1",
// "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCJ9.7IpEJxdOvBQ0kJ8l6ZegIV4tX5vsPbZZCDDVmcFROXc", },
// "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCJ9.7IpEJxdOvBQ0kJ8l6ZegIV4tX5vsPbZZCDDVmcFROXc",
}; }
var docEditor = new DocsAPI.DocEditor("placeholder", config); var docEditor = new DocsAPI.DocEditor('placeholder', config)
}, },
} },
} }
</script> </script>
<style scoped > <style scoped>
.wenDangDemo{ .wenDangDemo {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} .office {
.office{ color: black;
color: black; font-size: 20px;
font-size: 20px; cursor: pointer;
cursor: pointer; }
} .qualityManual-container-office {
.qualityManual-container-office { height: 100%;
height: 100%; width: 100%;
width: 100%; padding: 0 !important;
padding: 0 !important; }
} </style>
</style>
\ No newline at end of file
src/views/reviewArchiPoliticeCheck/index.vue
...@@ -33,6 +33,7 @@ import TableConfig from '@/components/TableConfig.vue' ...@@ -33,6 +33,7 @@ import TableConfig from '@/components/TableConfig.vue'
import { getDianXingAnLiSelectData } from '@/api/index.js' import { getDianXingAnLiSelectData } from '@/api/index.js'
export default { export default {
name: 'batchPlanManagement',
components: { components: {
ListPage, ListPage,
SearchForm, SearchForm,
...@@ -42,24 +43,14 @@ export default { ...@@ -42,24 +43,14 @@ export default {
return { return {
constructionTypeOptions: [], constructionTypeOptions: [],
selectRows: [], selectRows: [],
query: {
url: '/network/ele/',
method: 'post',
queryParam: {},
},
} }
}, },
computed: { computed: {
query() {
return {
url: '/network/ele/',
method: 'post',
queryParam: {
// archiBelongId: this.query_item1,
// current: this.pager.current,
// delFlag: 0,
// elementId: '',
// elementName: this.query_item3,
// pageSize: this.pager.size,
// state: this.query_item4,
},
}
},
formOptions() { formOptions() {
return [ return [
{ {
...@@ -177,7 +168,11 @@ export default { ...@@ -177,7 +168,11 @@ export default {
selectionChange(data) { selectionChange(data) {
this.selectRows = data this.selectRows = data
}, },
querySearch() { querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData() this.$refs.searchTable.queryData()
}, },
toDetails() { toDetails() {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!