Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f170d42e by liangzhen
Options

总部路由修改

1 parent 16a76632
Expand all
Inline Side-by-side
Showing with 28 additions and 1444 deletions
src/router/index.js
...@@ -54,6 +54,12 @@ export const routes = [ ...@@ -54,6 +54,12 @@ export const routes = [
}, },
}, },
{ {
path: '/main/metamodel',
meta: { title: "元模型看板" },
name: "metamodel",
component: () => import("@/views/system/metamodel/index.vue"),
},
{
path: "/main/archi-ele-rela", //架构元素关系管理 path: "/main/archi-ele-rela", //架构元素关系管理
name: "archi-ele-rela", name: "archi-ele-rela",
component: () => import("@/views/archiEleRela/index.vue"), component: () => import("@/views/archiEleRela/index.vue"),
...@@ -86,11 +92,6 @@ export const routes = [ ...@@ -86,11 +92,6 @@ export const routes = [
keepAlive: true, keepAlive: true,
}, },
}, },
// {
// path: '/main/YuanMoXingGuanLiCanvas',//元模型管理画布
// name: 'YuanMoXingGuanLiCanvas',
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
// },
{ {
path: "/main/doc-demo", //在线文档编制 path: "/main/doc-demo", //在线文档编制
name: "doc-demo", name: "doc-demo",
...@@ -134,11 +135,11 @@ export const routes = [ ...@@ -134,11 +135,11 @@ export const routes = [
}, },
}, },
{ {
path: "/main/reportTemplateFabric", //报告模板结构化 path: "/main/reportTemplateFabric",
name: "reportTemplateFabric", name: "reportTemplateFabric",
component: () => import("@/views/report-template-fabric/index.vue"), component: () => import("@/views/report-template-fabric/index.vue"),
meta: { meta: {
title: "报告模板结构化", title: "文档模板管理",
}, },
}, },
{ {
...@@ -194,7 +195,7 @@ export const routes = [ ...@@ -194,7 +195,7 @@ export const routes = [
name: "archiViewManage", name: "archiViewManage",
component: () => import("@/views/archi-view-manage/index.vue"), component: () => import("@/views/archi-view-manage/index.vue"),
meta: { meta: {
title: "架构视图管理", title: "总体架构视图管理",
keepAlive: true, keepAlive: true,
}, },
}, },
...@@ -274,11 +275,11 @@ export const routes = [ ...@@ -274,11 +275,11 @@ export const routes = [
}, },
}, },
{ {
path: "/main/systemInfoManage", //系统信息管理 path: "/main/systemInfoManage", //系统信息维护
name: "systemInfoManage", name: "systemInfoManage",
component: () => import("@/views/systemInfoManage/index.vue"), component: () => import("@/views/systemInfoManage/index.vue"),
meta: { meta: {
title: "系统信息管理", title: "系统信息维护",
}, },
}, },
{ {
...@@ -286,7 +287,7 @@ export const routes = [ ...@@ -286,7 +287,7 @@ export const routes = [
name: "projectInfoManage", name: "projectInfoManage",
component: () => import("@/views/projectInfoManage/index.vue"), component: () => import("@/views/projectInfoManage/index.vue"),
meta: { meta: {
title: "项目信息管理", title: "项目信息维护",
}, },
}, },
{ {
...@@ -571,53 +572,13 @@ export const routes = [ ...@@ -571,53 +572,13 @@ export const routes = [
keepAlive: true, keepAlive: true,
}, },
}, },
{
path: "/main/digitalizeBuildAnalysis",
name: "digitalizeBuildAnalysis",
component: () => import("@/views/bigScreen/digitalizeBuildAnalysis/index.vue"),
meta: {
title: "电网数字化项目建设分析",
},
},
{
path: "/main/architectureBlueprintAnalysis",
name: "architectureBlueprintAnalysis",
component: () => import("@/views/bigScreen/architectureBlueprintAnalysis/index.vue"),
meta: {
title: "公司架构蓝图实现情况分析",
},
},
{
path: "/main/manageCockpit",
name: "manageCockpit",
component: () => import("@/views/bigScreen/cockpit/manageCockpit/index.vue"),
meta: {
title: "管理智能驾驶舱",
keepAlive: true,
},
},
{
path: "/main/businessCockpit",
name: "businessCockpit",
component: () => import("@/views/bigScreen/cockpit/businessCockpit/index.vue"),
meta: {
title: "业务智能驾驶舱",
keepAlive: true,
},
},
{
path: "/main/projectCockpit",
name: "projectCockpit",
component: () => import("@/views/bigScreen/cockpit/projectCockpit/index.vue"),
meta: {
title: "项目智能驾驶舱详情",
},
},
//国能新增 //国能新增
{ {
path: '/main/personnel', path: '/main/personnel',
meta: { title: "用户管理" }, meta: { title: "用户管理" },
name: "personnel",
component: () => import("@/views/system/personnel/index.vue"), component: () => import("@/views/system/personnel/index.vue"),
}, },
// { // {
...@@ -628,38 +589,46 @@ export const routes = [ ...@@ -628,38 +589,46 @@ export const routes = [
{ {
path: '/main/roleAdmin', path: '/main/roleAdmin',
meta: { title: "角色管理" }, meta: { title: "角色管理" },
name: "roleAdmin",
component: () => import("@/views/system/roleAdmin/index.vue"), component: () => import("@/views/system/roleAdmin/index.vue"),
}, },
{ {
path: '/main/powerAdmin', path: '/main/powerAdmin',
meta: { title: "权限管理" }, meta: { title: "权限管理" },
name: "powerAdmin",
component: () => import("@/views/system/powerAdmin/index.vue"), component: () => import("@/views/system/powerAdmin/index.vue"),
}, },
{ {
path: '/main/recordAdmin', path: '/main/recordAdmin',
meta: { title: "日志管理" }, meta: { title: "日志管理" },
name: "recordAdmin",
component: () => import("@/views/system/recordAdmin/index.vue"), component: () => import("@/views/system/recordAdmin/index.vue"),
}, },
{ {
path: '/main/business', path: '/main/business',
meta: { title: "架构资产看板" }, meta: { title: "架构资产看板" },
name: "businesskb",
component: () => import("@/views/system/business/index.vue"), component: () => import("@/views/system/business/index.vue"),
}, },
{
path: '/main/metamodel',
meta: { title: "元模型看板" },
component: () => import("@/views/system/metamodel/index.vue"),
},
{ {
path: '/main/application', path: '/main/application',
meta: { title: "架构资产检索" }, meta: { title: "架构资产检索" },
name: "application",
component: () => import("@/views/system/application/index.vue"), component: () => import("@/views/system/application/index.vue"),
}, },
{ {
path: '/main/analyse', path: '/main/analyse',
meta: { title: "架构多维分析" }, meta: { title: "架构多维分析" },
name: "analyse",
component: () => import("@/views/system/analyse/index.vue"), component: () => import("@/views/system/analyse/index.vue"),
}, },
{
path: '/main/managementDoc',
meta: { title: "架构文档管理" },
name: "managementDoc",
component: () => import("@/views/system/managementDoc/index.vue"),
},
], ],
}, },
......
src/views/Main/components/TagsView/index.vue
...@@ -143,6 +143,7 @@ export default { ...@@ -143,6 +143,7 @@ export default {
} }
}, },
addTags() { addTags() {
console.log('添加多标签',this.$route)
const { name } = this.$route const { name } = this.$route
if (name) { if (name) {
this.$store.dispatch('tagsView/addView', this.$route) this.$store.dispatch('tagsView/addView', this.$route)
......
src/views/bigScreen/architectureBlueprintAnalysis/index.vue deleted 100644 → 0
<!--
* @Description: 公司架构蓝图实现情况分析
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-28 18:59:07
* @LastEditors: pan
* @LastEditTime: 2024-06-19 18:25:31
-->
<template>
<div class="w-100 h-100 p-10 architectureBlueprintAnalysis">
<div class="filter-year m-b-10">
<el-date-picker
:editable="false"
v-model="year"
format="yyyy 年"
value-format="yyyy"
type="year"
placeholder="选择年"
:clearable="false"
@change="getAssetTypeDataByYearCount"
>
</el-date-picker>
</div>
<div class="container">
<el-row :gutter="20" type="flex" justify="center" style="flex-wrap: wrap">
<el-col
class="m-b-20"
:span="8"
v-for="(item, idx) in cardItems"
:key="idx"
>
<div class="card-item" :style="{ backgroundColor: item.bgColor }">
<div class="card-title font-14 m-b-10">{{ item.title }}</div>
<div class="flex-b-c">
<div
class="flex"
v-for="(countItem, idx2) in item.countItems"
:key="idx2"
>
<div class="count-item flex-column">
<div class="count-item-title font-14 m-b-10">
{{ countItem.title }}
</div>
<div class="count-item-value font-20 font-bold flex">
<count-to
:start-val="0"
:end-val="countItem.count1"
:duration="2000"
separator=","
autoplay
/>
<span>/</span>
<count-to
:start-val="0"
:end-val="countItem.count2"
:duration="2000"
separator=","
autoplay
/>
<span>个</span>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<chart-box height="330px" chart-title="视图数量">
<BaseChart :option="chartOptions" ref="chart" />
</chart-box>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import ChartBox from '@/components/Charts/ChartBox.vue'
import BaseChart from '@/components/Charts/BaseChart.vue'
import CountTo from '@/components/VueCountTo/index.vue'
import { getAssetTypeDataByYearCount } from '@/api/bigScreen'
export default {
name: 'architectureBlueprintAnalysis',
components: {
ChartBox,
BaseChart,
CountTo,
},
data() {
return {
year: new Date().format('yyyy'),
detailData: {},
}
},
computed: {
cardItems() {
const {
ARCHI_BUSINESS,
ARCHI_APPLICATION,
ARCHI_DATA,
ARCHI_TECHNOLOGY,
ARCHI_SAFE,
} = this.detailData
return [
{
title: '业务架构资产',
bgColor: '#8895ed',
countItems: [
{
title: '业务域',
count1: ARCHI_BUSINESS && ARCHI_BUSINESS['busDomainNum'],
count2: ARCHI_BUSINESS && ARCHI_BUSINESS['busDomainNum-sys'],
},
{
title: '业务职能',
count1: ARCHI_BUSINESS
? (ARCHI_BUSINESS['oneLevelBusFuncNum'] || 0) +
(ARCHI_BUSINESS['twoLevelBusFuncNum'] || 0)
: 0,
count2: ARCHI_BUSINESS
? (ARCHI_BUSINESS['oneLevelBusFuncNum-sys'] || 0) +
(ARCHI_BUSINESS['twoLevelBusFuncNum-sys'] || 0)
: 0,
},
{
title: '业务流程',
count1: ARCHI_BUSINESS && ARCHI_BUSINESS['busProcessNum'],
count2: ARCHI_BUSINESS && ARCHI_BUSINESS['busProcessNum-sys'],
},
],
},
{
title: '应用架构资产',
bgColor: '#b591e8',
countItems: [
{
title: '应用',
count1: ARCHI_APPLICATION && ARCHI_APPLICATION['appDomainNum'],
count2:
ARCHI_APPLICATION && ARCHI_APPLICATION['appDomainNum-sys'],
},
{
title: '一级功能',
count1:
ARCHI_APPLICATION && ARCHI_APPLICATION['oneLevelAppCount'],
count2:
ARCHI_APPLICATION && ARCHI_APPLICATION['oneLevelAppCount-sys'],
},
{
title: '二级功能',
count1:
ARCHI_APPLICATION && ARCHI_APPLICATION['twoLevelAppCount'],
count2:
ARCHI_APPLICATION && ARCHI_APPLICATION['twoLevelAppCount-sys'],
},
],
},
{
title: '数据架构资产',
bgColor: '#e192a6',
countItems: [
{
title: '一级主题域',
count1: ARCHI_DATA && ARCHI_DATA['oneLevelDataCount'],
count2: ARCHI_DATA && ARCHI_DATA['oneLevelDataCount-sys'],
},
{
title: '二级主题域',
count1: ARCHI_DATA && ARCHI_DATA['twoLevelDataCount'],
count2: ARCHI_DATA && ARCHI_DATA['twoLevelDataCount-sys'],
},
{
title: '概念实体',
count1: ARCHI_DATA && ARCHI_DATA['systemTotal'],
count2: ARCHI_DATA && ARCHI_DATA['totalityTotal'],
},
],
},
{
title: '技术架构资产',
bgColor: '#93afe9',
countItems: [
{
title: '技术域',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecDomainNum'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecDomainNum-sys'],
},
{
title: '技术能力',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecAbilityNum'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecAbilityNum-sys'],
},
{
title: '技术组件',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecModulNum'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecModulNum-sys'],
},
],
},
{
title: '安全架构资产',
bgColor: '#a4ebaf',
countItems: [
{
title: '安全管理体系',
count1: ARCHI_SAFE && ARCHI_SAFE['safeManageNum'],
count2: ARCHI_SAFE && ARCHI_SAFE['safeManageNum-sys'],
},
{
title: '安全主题域',
count1: ARCHI_SAFE && ARCHI_SAFE['safeThemeNum'],
count2: ARCHI_SAFE && ARCHI_SAFE['safeThemeNum-sys'],
},
{
title: '安全策略',
count1: ARCHI_SAFE && ARCHI_SAFE['safePlicyNum'],
count2: ARCHI_SAFE && ARCHI_SAFE['safePlicyNum-sys'],
},
],
},
]
},
chartOptions() {
return {
color: ['#f2ad65', '#a0ddb8'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
data: ['总体', '系统'],
align: 'right',
left: '5%',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['业务架构', '应用架构', '数据架构', '技术架构', '安全架构'],
},
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}',
},
},
],
series: [
{
name: '总体',
type: 'bar',
data: this.getTotal[1],
},
{
name: '系统',
type: 'bar',
data: this.getTotal[0],
},
],
}
},
getTotal() {
let [systemTotalList, totalityTotal] = [[], []]
if (Object.keys(this.detailData).length) {
for (const key in this.detailData) {
if (Object.hasOwnProperty.call(this.detailData, key)) {
const item = this.detailData[key]
systemTotalList.push(item.systemTotal || 0)
totalityTotal.push(item.totalityTotal || 0)
}
}
return [systemTotalList, totalityTotal]
} else {
return [
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
]
}
},
},
created() {
this.getAssetTypeDataByYearCount()
},
methods: {
getAssetTypeDataByYearCount() {
getAssetTypeDataByYearCount({ year: this.year }).then((res) => {
if (res.code === 200) {
this.detailData = res.data
} else {
this.detailData = {}
this.$message.warning(res.msg)
}
})
},
},
}
</script>
<style scoped lang="scss">
.architectureBlueprintAnalysis {
box-sizing: border-box;
overflow-y: auto;
.card-item {
border-radius: 5px;
color: #ffffff;
text-align: left;
padding: 10px 16px;
}
}
</style>
src/views/bigScreen/cockpit/businessCockpit/index.vue deleted 100644 → 0
<!--
* @Description: 业务智能驾驶舱
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 09:51:26
* @LastEditors: pan
* @LastEditTime: 2024-06-11 16:29:47
-->
<template>
<div class="w-100 h-100 manageCockpit flex">
<div class="leftTree">
<div class="treeTitle">组织机构</div>
<el-tree
:highlight-current="true"
:data="treeData"
:props="treeProps"
@node-click="handleNodeClick"
></el-tree>
</div>
<div class="flex-1" style="min-width: 0">
<div class="header__wrap p-16">
<div class="header-title m-b-16 align-l">
<span class="font-18 font-bold">发展策划部</span>
<div class="flex m-t-10">
<div class="flex m-r-30">
<div class="label">支撑业务系统数量:</div>
<div class="font-bold font-18">{{ numberSystems }}</div>
</div>
<div class="flex m-r-30">
<div class="label">涉及业务流程数量:</div>
<div class="font-bold font-18">{{ businessProcess }}</div>
</div>
<div class="flex">
<div class="label">涉及业务活动数量:</div>
<div class="font-bold font-18">{{ businessActivities }}</div>
</div>
</div>
</div>
<div class="header-choosePrj align-l">
<el-button class="m-r-20" type="primary" @click="fnChoosePrj()"
>选择项目
</el-button>
<span>您已选择：{{ prjInfo.prjName }}</span>
</div>
</div>
<div class="content__wrap flex">
<ProjectInfo ref="project" style="width: 30%" />
<ViewInfo
style="width: 70%"
:prjId="prjInfo.prjId"
ref="view"
class="flex-1"
/>
</div>
</div>
<!-- 选择项目组件 -->
<ChoosePrjDialog
@selectData="selectData"
:visible.sync="choosePrjVisible"
/>
</div>
</template>
<script>
import ChoosePrjDialog from '@/components/ChoosePrjDialog.vue'
import ProjectInfo from '../components/ProjectInfo.vue'
import ViewInfo from '../components/ViewInfo.vue'
import { queryProjectInfoManageTable } from '@/api/index'
import { getOrgTree, getCountBusiness } from '@/api/bigScreen'
export default {
name: 'manageCockpit',
components: {
ProjectInfo,
ChoosePrjDialog,
ViewInfo,
},
data() {
return {
choosePrjVisible: false,
prjInfo: {},
treeData: [],
treeProps: {
children: 'children',
label: 'name',
},
businessActivities: 0,
businessProcess: 0,
numberSystems: 0,
}
},
created() {
this.queryProjectInfoManageTable()
this.getOrgTree()
this.getCountBusiness()
},
methods: {
init() {
this.$refs['project'].fnGetDetail(this.prjInfo.prjId)
this.$refs['view'].getViewInfo(this.prjInfo.prjId)
},
queryProjectInfoManageTable() {
const params = {
current: 1,
pageSize: 1,
}
queryProjectInfoManageTable(params).then((res) => {
if (res.code === 200) {
this.prjInfo = res.data.records[0]
this.init()
} else {
this.$message.warning(res.msg)
}
})
},
getOrgTree() {
getOrgTree().then((res) => {
if (res.code === 200) {
this.treeData = res.data
}
})
},
fnChoosePrj() {
this.choosePrjVisible = true
},
selectData(data) {
console.log(data)
this.prjInfo = data[0]
this.init()
},
handleNodeClick() {},
getCountBusiness() {
getCountBusiness().then(res => {
if(res.code === 200) {
this.businessActivities = res.data.businessActivities,
this.businessProcess = res.data.businessProcess
this.numberSystems = res.data.numberSystems
}
})
}
},
}
</script>
<style scoped lang="scss">
.manageCockpit {
.leftTree {
width: 273px;
display: flex;
flex-direction: column;
border-right: 1px solid #ebeef5;
// height: 100%;
.treeTitle {
height: 60px;
line-height: 60px;
padding: 0 15px;
box-sizing: border-box;
border-bottom: 1px solid #ebeef5;
text-align: left;
font-weight: bold;
}
/deep/ .el-tree {
flex: 1;
min-height: 0;
overflow: auto;
padding-right: 10px;
margin-bottom: 10px;
.el-tree-node__expand-icon.el-icon-caret-right.is-leaf {
background-color: #ffffff !important;
}
.el-tree-node__content:hover {
.is-leaf {
background-color: #f5f7fa !important;
}
}
}
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #c0ebe4 !important;
color: #999999;
.is-leaf {
background-color: #c0ebe4 !important;
}
}
}
.header__wrap {
border-bottom: 1px solid #ebeef5;
}
.content__wrap {
height: calc(100% - 114px);
}
}
</style>
src/views/bigScreen/cockpit/components/ProjectInfo.vue deleted 100644 → 0
<!--
* @Description: 智能驾驶舱模块 项目信息组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 09:54:56
* @LastEditors: pan
* @LastEditTime: 2024-06-07 09:29:16
-->
<template>
<el-scrollbar>
<div class="project-info p-16">
<div class="title font-18 font-bold m-b-10">项目信息</div>
<div
class="info-item flex m-b-6"
v-for="(item, idx) in items"
:key="idx"
>
<div class="label m-r-10">{{ item.label }}:</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</el-scrollbar>
</template>
<script>
import { getPrjInfo } from '@/api/bigScreen'
export default {
props: {},
data() {
return {
items: [
{
label: '单位',
value: '',
key: 'manageOrgName',
},
{
label: '部门',
value: '',
key: 'manageDeptName',
},
{
label: '系统名称',
value: '',
key: 'appName',
},
{
label: '建设类型',
value: '',
key: 'buildTypeName',
},
{
label: '项目名称',
value: '',
key: 'prjName',
},
{
label: '项目类型',
value: '',
key: 'prjPlanClassName',
},
{
label: '业务部门',
value: '',
key: 'manageOrgName',
},
{
label: '承建单位',
value: '',
key: 'manageDeptName',
},
{
label: '项目经理',
value: '',
key: 'projectManager',
},
{
label: '概设评审信息',
value: '完成',
},
{
label: '督查相关信息',
value: '完成',
},
{
label: '项目资料',
value: '',
},
],
}
},
components: {},
mounted() {},
methods: {
fnGetDetail(prjId) {
getPrjInfo({ prjId }).then((res) => {
if (res.code === 200) {
const detailData = res.data
this.items.forEach(v => {
for (const key in detailData) {
if (Object.hasOwnProperty.call(detailData, key)) {
if(v.key === key) {
v.value = detailData[key]
}
}
}
})
}
})
},
},
}
</script>
<style scoped lang="scss">
/deep/ .el-scrollbar__wrap {
margin-right: -8px !important;
}
.label {
width: 120px;
text-align: right;
}
.value {
flex: 1;
text-align: left;
}
.title {
text-align: left;
}
</style>
src/views/bigScreen/cockpit/components/ViewInfo.vue deleted 100644 → 0
<!--
* @Description: 智能驾驶舱模块 视图信息组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 10:20:36
* @LastEditors: pan
* @LastEditTime: 2024-06-11 15:19:04
-->
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleSubClick">
<el-tab-pane
:label="item.label"
:name="item.value"
v-for="item in archiBelongOptions"
:key="item.value"
>
</el-tab-pane>
</el-tabs>
<div class="view__wrap flex" v-loading="loading">
<template v-if="viewList.length">
<el-scrollbar>
<div class="view_card p-r-10">
<el-card
class="m-b-16 card-item"
shadow="hover"
v-for="item in viewList"
:key="item.viewId"
@click.native="fnCheckGraph(item)"
>
<div class="view_name">{{ item.viewName }}</div>
<div class="svg">
<img
class="w-100 h-100"
:src="getSvg(item.metaModelSvg)"
alt=""
/>
</div>
</el-card>
</div>
</el-scrollbar>
<div class="mxGraph flex-1">
<img class="w-100 h-100" :src="metaModelData" alt="" />
<!-- <div id="mxGraph_root" class="w-100 h-100"></div> -->
</div>
</template>
<el-empty class="w-100" v-else description="暂无数据"></el-empty>
</div>
</div>
</template>
<script>
import { query_jia_gou_ceng_ci_new } from '@/api/index'
import { getViewInfo } from '@/api/bigScreen'
export default {
props: {
prjId: {
type: Number,
default: null,
},
},
data() {
return {
activeName: '1',
archiBelongOptions: [],
viewList: [],
graph: null,
loading: false,
metaModelData: ''
}
},
components: {},
created() {
this.getArchiBelong()
},
methods: {
getSvg(base64) {
return `data:image/svg+xml;base64,${base64}`
},
fnCheckGraph(item) {
// this.graph.destroy()
// this.initGraph(item.metaModelData)
this.metaModelData = this.getSvg(item.metaModelSvg)
},
handleSubClick() {
this.graph?.destroy()
this.getViewInfo(this.prjId)
},
getArchiBelong() {
query_jia_gou_ceng_ci_new({ typeValue: 'archi_belong' }).then((res) => {
if (res.code == 200) {
this.archiBelongOptions = res.data
this.activeName = this.archiBelongOptions[0].value
} else {
this.$message.warning(res.msg)
}
})
},
getViewInfo(prjId) {
const params = {
prjId,
archiBelongId: this.activeName,
}
this.loading = true
getViewInfo(params)
.then((res) => {
this.loading = false
if (res.code === 200) {
this.viewList = res.data
this.metaModelData = this.getSvg(this.viewList[0].metaModelSvg)
// this.$nextTick(() => {
// this.initGraph(this.viewList[0]?.metaModelData)
// })
} else {
this.viewList = []
}
})
.catch((err) => {
this.loading = false
})
},
// initGraph(xml) {
// if (!xml) return
// this.graph = new mxGraph(document.getElementById('mxGraph_root'))
// this.graph.centerZoom = false // 是否居中缩放
// this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
// const model = this.graph.getModel()
// model.beginUpdate()
// try {
// const parseXml = xml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
// var doc = mxUtils.parseXml(xml)
// var codec = new mxCodec(doc)
// console.log('doc', parseXml)
// codec.decode(doc.documentElement, this.graph.getModel())
// } finally {
// model.endUpdate()
// }
// },
},
destroyed() {
// this.graph.destroy()
},
}
</script>
<style scoped lang="scss">
/deep/ .el-scrollbar__wrap {
margin-right: -8px !important;
}
.view__wrap {
height: calc(100% - 54px);
overflow: hidden;
padding-right: 10px;
.view_card {
.card-item {
background-color: #f5fffe;
cursor: pointer;
.svg {
width: 140px;
height: 100px;
}
}
}
.mxGraph {
overflow: auto;
}
}
</style>
src/views/bigScreen/cockpit/manageCockpit/index.vue deleted 100644 → 0
<!--
* @Description: 管理智能驾驶舱
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 09:51:26
* @LastEditors: pan
* @LastEditTime: 2024-06-11 09:29:35
-->
<template>
<div class="w-100 h-100 manageCockpit flex">
<div class="leftTree">
<div class="treeTitle">组织机构</div>
<el-tree
:highlight-current="true"
:data="treeData"
:props="treeProps"
@node-click="handleNodeClick"
></el-tree>
</div>
<div class="flex-1" style="min-width: 0">
<div class="header__wrap p-16">
<div class="header-title m-b-16 align-l font-bold font-18">
发展策划部
</div>
<div class="header-choosePrj align-l">
<el-button class="m-r-20" type="primary" @click="fnChoosePrj()"
>选择项目</el-button
>
<span>您已选择：{{ prjInfo.prjName }}</span>
</div>
</div>
<div class="content__wrap flex">
<ProjectInfo ref="project" style="width: 30%" />
<ViewInfo
style="width: 70%"
:prjId="prjInfo.prjId"
ref="view"
class="flex-1"
/>
</div>
</div>
<!-- 选择项目组件 -->
<ChoosePrjDialog
@selectData="selectData"
:visible.sync="choosePrjVisible"
/>
</div>
</template>
<script>
import ChoosePrjDialog from '@/components/ChoosePrjDialog.vue'
import ProjectInfo from '../components/ProjectInfo.vue'
import ViewInfo from '../components/ViewInfo.vue'
import { queryProjectInfoManageTable } from '@/api/index'
import { getOrgTree } from '@/api/bigScreen'
export default {
name: 'manageCockpit',
components: {
ProjectInfo,
ChoosePrjDialog,
ViewInfo,
},
data() {
return {
choosePrjVisible: false,
prjInfo: {},
treeData: [],
treeProps: {
children: 'children',
label: 'name',
},
}
},
created() {
this.queryProjectInfoManageTable()
this.getOrgTree()
},
methods: {
init() {
this.$refs['project'].fnGetDetail(this.prjInfo.prjId)
this.$refs['view'].getViewInfo(this.prjInfo.prjId)
},
queryProjectInfoManageTable() {
const params = {
current: 1,
pageSize: 1,
}
queryProjectInfoManageTable(params).then((res) => {
if (res.code === 200) {
this.prjInfo = res.data.records[0]
this.init()
} else {
this.$message.warning(res.msg)
}
})
},
getOrgTree() {
getOrgTree().then((res) => {
if (res.code === 200) {
this.treeData = res.data
}
})
},
fnChoosePrj() {
this.choosePrjVisible = true
},
selectData(data) {
console.log(data)
this.prjInfo = data[0]
this.init()
},
handleNodeClick() {},
},
}
</script>
<style scoped lang="scss">
.manageCockpit {
.leftTree {
width: 273px;
display: flex;
flex-direction: column;
border-right: 1px solid #ebeef5;
// height: 100%;
.treeTitle {
height: 60px;
line-height: 60px;
padding: 0 15px;
box-sizing: border-box;
border-bottom: 1px solid #ebeef5;
text-align: left;
font-weight: bold;
}
/deep/ .el-tree {
flex: 1;
min-height: 0;
overflow: auto;
padding-right: 10px;
margin-bottom: 10px;
.el-tree-node__expand-icon.el-icon-caret-right.is-leaf {
background-color: #ffffff !important;
}
.el-tree-node__content:hover {
.is-leaf {
background-color: #f5f7fa !important;
}
}
}
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #c0ebe4 !important;
color: #999999;
.is-leaf {
background-color: #c0ebe4 !important;
}
}
}
.header__wrap {
border-bottom: 1px solid #ebeef5;
}
.content__wrap {
height: calc(100% - 114px);
}
}
</style>
src/views/bigScreen/cockpit/projectCockpit/index.vue deleted 100644 → 0
<!--
* @Description: 项目智能驾驶舱
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 09:51:26
* @LastEditors: pan
* @LastEditTime: 2024-06-11 16:16:47
-->
<template>
<div class="w-100 h-100 manageCockpit flex">
<div class="leftTree">
<div class="treeTitle">组织机构</div>
<el-tree
:highlight-current="true"
:data="treeData"
:props="treeProps"
@node-click="handleNodeClick"
></el-tree>
</div>
<div class="flex-1" style="min-width: 0">
<div class="header__wrap p-16">
<div class="header-title m-b-16 align-l font-bold font-18">
发展策划部
</div>
<div class="header-choosePrj align-l">
<el-button class="m-r-20" type="primary" @click="fnChoosePrj()"
>选择项目</el-button
>
<span>您已选择：{{ prjInfo.prjName }}</span>
</div>
</div>
<div class="content__wrap flex">
<ProjectInfo ref="project" style="width: 30%" />
<ViewInfo
style="width: 70%"
:prjId="prjInfo.prjId"
ref="view"
class="flex-1"
/>
</div>
</div>
<!-- 选择项目组件 -->
<ChoosePrjDialog
@selectData="selectData"
:visible.sync="choosePrjVisible"
/>
</div>
</template>
<script>
import ChoosePrjDialog from '@/components/ChoosePrjDialog.vue'
import ProjectInfo from '../components/ProjectInfo.vue'
import ViewInfo from '../components/ViewInfo.vue'
import { queryProjectInfoManageTable } from '@/api/index'
import { getOrgTree } from '@/api/bigScreen'
export default {
name: 'manageCockpit',
components: {
ProjectInfo,
ChoosePrjDialog,
ViewInfo,
},
data() {
return {
choosePrjVisible: false,
prjInfo: {},
treeData: [],
treeProps: {
children: 'children',
label: 'name',
},
}
},
created() {
this.queryProjectInfoManageTable()
this.getOrgTree()
},
methods: {
init() {
this.$refs['project'].fnGetDetail(this.prjInfo.prjId)
this.$refs['view'].getViewInfo(this.prjInfo.prjId)
},
queryProjectInfoManageTable() {
const params = {
current: 1,
pageSize: 1,
}
queryProjectInfoManageTable(params).then((res) => {
if (res.code === 200) {
this.prjInfo = res.data.records[0]
this.init()
} else {
this.$message.warning(res.msg)
}
})
},
getOrgTree() {
getOrgTree().then((res) => {
if (res.code === 200) {
this.treeData = res.data
}
})
},
fnChoosePrj() {
this.choosePrjVisible = true
},
selectData(data) {
console.log(data)
this.prjInfo = data[0]
this.init()
},
handleNodeClick() {},
},
}
</script>
<style scoped lang="scss">
.manageCockpit {
.leftTree {
width: 273px;
display: flex;
flex-direction: column;
border-right: 1px solid #ebeef5;
// height: 100%;
.treeTitle {
height: 60px;
line-height: 60px;
padding: 0 15px;
box-sizing: border-box;
border-bottom: 1px solid #ebeef5;
text-align: left;
font-weight: bold;
}
/deep/ .el-tree {
flex: 1;
min-height: 0;
overflow: auto;
padding-right: 10px;
margin-bottom: 10px;
.el-tree-node__expand-icon.el-icon-caret-right.is-leaf {
background-color: #ffffff !important;
}
.el-tree-node__content:hover {
.is-leaf {
background-color: #f5f7fa !important;
}
}
}
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #c0ebe4 !important;
color: #999999;
.is-leaf {
background-color: #c0ebe4 !important;
}
}
}
.header__wrap {
border-bottom: 1px solid #ebeef5;
}
.content__wrap {
height: calc(100% - 114px);
}
}
</style>
src/views/bigScreen/digitalizeBuildAnalysis/chartOptions.mixins.js deleted 100644 → 0
import { getPastFiveYearList } from '@/utils'
const chartOptions = {
data() {
return {
chart1SumList: [],
chart1NumList: [],
chart3XAxisData: [],
buildingPrjNumList: [],
prjNumList: [],
prjSumList: [],
buildingPrjSumList: [],
chart4List: [],
chart5List: [],
}
},
computed: {
chart1Options() {
return {
backgroundColor: '#fff',
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
},
legend: {
orient: 'vertical',
right: '0%',
bottom: 0,
data: [
'统推项目金额',
'自建项目金额',
'统推项目数量',
'自建项目数量',
],
},
series: [
{
type: 'pie',
selectedMode: 'single',
radius: ['58%', '83%'],
color: ['#627bf5', '#90a1f8', '#f09b69', '#f7cd96'],
label: {
position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 12,
},
},
labelLine: {
show: false,
},
data: this.chart1SumList,
},
{
type: 'pie',
radius: ['25%', '58%'],
color: ['#627bf5', '#90a1f8', '#f09b69', '#f7cd96'],
label: {
position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: 12,
},
},
data: this.chart1NumList,
},
],
}
},
chart3Options() {
return {
color: ['#67a6a4', '#8e9dec'],
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
},
grid: {
left: '5%',
},
legend: {
left: '5%',
data: ['在建数量', '项目数量', '在建项目金额', '项目金额'],
},
xAxis: [
{
type: 'category',
data: this.chart3XAxisData,
axisTick: {
show: false,
},
axisLine: {
show: false,
// lineStyle: {
// color: '#ccc'
// }
},
axisLabel: {
color: '#333',
},
},
],
yAxis: [
{
type: 'value',
name: '个',
// min: 0,
// max: Math.max(...this.buildingPrjNumList, ...this.prjNumList),
// interval: 20,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
},
{
type: 'value',
name: '万元',
// min: 0,
// max: Math.max(...this.buildingPrjSumList, ...this.prjSumList),
// interval: Math.max(...this.buildingPrjNumList) / 10,
axisLabel: {
formatter: '{value}',
},
},
],
series: [
{
name: '在建数量',
type: 'bar',
yAxisIndex: 0,
data: this.buildingPrjNumList,
},
{
name: '项目数量',
type: 'bar',
yAxisIndex: 0,
data: this.prjNumList,
},
{
name: '在建项目金额',
type: 'line',
yAxisIndex: 1,
data: this.buildingPrjSumList,
},
{
name: '项目金额',
type: 'line',
yAxisIndex: 1,
data: this.prjSumList,
},
],
}
},
chart4Options() {
return {
color: '#f7c667',
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: getPastFiveYearList(),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
series: [
{
data: this.chart4List,
type: 'line',
},
],
}
},
chart5Options() {
return {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: getPastFiveYearList(),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
series: this.chart5List,
}
},
},
methods: {},
}
export default chartOptions
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!