Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f170d42e by liangzhen
Options

总部路由修改

1 parent 16a76632
Inline Side-by-side
Showing with 31 additions and 2216 deletions
src/router/index.js
......@@ -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", //架构元素关系管理
name: "archi-ele-rela",
component: () => import("@/views/archiEleRela/index.vue"),
......@@ -86,11 +92,6 @@ export const routes = [
keepAlive: true,
},
},
// {
// path: '/main/YuanMoXingGuanLiCanvas',//元模型管理画布
// name: 'YuanMoXingGuanLiCanvas',
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
// },
{
path: "/main/doc-demo", //在线文档编制
name: "doc-demo",
......@@ -134,11 +135,11 @@ export const routes = [
},
},
{
path: "/main/reportTemplateFabric", //报告模板结构化
path: "/main/reportTemplateFabric",
name: "reportTemplateFabric",
component: () => import("@/views/report-template-fabric/index.vue"),
meta: {
title: "报告模板结构化",
title: "文档模板管理",
},
},
{
......@@ -194,7 +195,7 @@ export const routes = [
name: "archiViewManage",
component: () => import("@/views/archi-view-manage/index.vue"),
meta: {
title: "架构视图管理",
title: "总体架构视图管理",
keepAlive: true,
},
},
......@@ -274,11 +275,11 @@ export const routes = [
},
},
{
path: "/main/systemInfoManage", //系统信息管理
path: "/main/systemInfoManage", //系统信息维护
name: "systemInfoManage",
component: () => import("@/views/systemInfoManage/index.vue"),
meta: {
title: "系统信息管理",
title: "系统信息维护",
},
},
{
......@@ -286,7 +287,7 @@ export const routes = [
name: "projectInfoManage",
component: () => import("@/views/projectInfoManage/index.vue"),
meta: {
title: "项目信息管理",
title: "项目信息维护",
},
},
{
......@@ -571,53 +572,13 @@ export const routes = [
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',
meta: { title: "用户管理" },
name: "personnel",
component: () => import("@/views/system/personnel/index.vue"),
},
// {
......@@ -628,38 +589,46 @@ export const routes = [
{
path: '/main/roleAdmin',
meta: { title: "角色管理" },
name: "roleAdmin",
component: () => import("@/views/system/roleAdmin/index.vue"),
},
{
path: '/main/powerAdmin',
meta: { title: "权限管理" },
name: "powerAdmin",
component: () => import("@/views/system/powerAdmin/index.vue"),
},
{
path: '/main/recordAdmin',
meta: { title: "日志管理" },
name: "recordAdmin",
component: () => import("@/views/system/recordAdmin/index.vue"),
},
{
path: '/main/business',
meta: { title: "架构资产看板" },
name: "businesskb",
component: () => import("@/views/system/business/index.vue"),
},
{
path: '/main/metamodel',
meta: { title: "元模型看板" },
component: () => import("@/views/system/metamodel/index.vue"),
},
{
path: '/main/application',
meta: { title: "架构资产检索" },
name: "application",
component: () => import("@/views/system/application/index.vue"),
},
{
path: '/main/analyse',
meta: { title: "架构多维分析" },
name: "analyse",
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 {
}
},
addTags() {
console.log('添加多标签',this.$route)
const { name } = this.$route
if (name) {
this.$store.dispatch('tagsView/addView', this.$route)
......
src/views/Main/menu.js
......@@ -29,7 +29,7 @@ export const menuOptions = [
children: [
{
name: '总体架构资产管理',
path: '/main/systemInfoManage',
path: '/main/busiAssetslist',
},
],
},
......@@ -100,14 +100,13 @@ export const menuOptions = [
children: [
{
name: '架构文档管理',
path: '/main/totalArchiPropertyDocument',
path: '/main/managementDoc',
},
],
},
]
},
//没找到
{
name: '架构知识库',
width: '420',
......@@ -117,7 +116,7 @@ export const menuOptions = [
children: [
{
name: '文档模板管理',
path: '/main/reportTemplateRelativeUse',
path: '/main/reportTemplateFabric',
},
],
},
......@@ -133,7 +132,6 @@ export const menuOptions = [
]
},
//没找到 新建的
{
name: '架构地图',
width: '1000',
......@@ -229,396 +227,4 @@ export const menuOptions = [
]
}
// {
// name: '架构全景大屏及智能驾驶舱',
// width: '420',
// children: [
// {
// name: '架构全景智能大屏',
// children: [
// {
// name: '电网数字化项目建设分析',
// path: '/main/digitalizeBuildAnalysis',
// },
// {
// name: '公司架构蓝图实现情况分析',
// path: '/main/architectureBlueprintAnalysis',
// },
// ],
// },
// {
// name: '智能驾驶舱',
// children: [
// {
// name: '管理智能驾驶舱',
// path: '/main/manageCockpit',
// },
// {
// name: '业务智能驾驶舱',
// path: '/main/businessCockpit',
// },
// {
// name: '项目智能驾驶舱',
// path: '/main/projectCockpit',
// },
// ],
// },
// ],
// },
// {
// name: '总体架构资产设计与维护',
// width: '440',
// children: [
// {
// name: '架构元模型管理',
// children: [
// {
// name: '架构元素管理',
// path: '/main/archiEleList',
// },
// {
// name: '架构元素关系管理',
// path: '/main/archi-ele-rela',
// },
// {
// name: '元模型管理',
// path: '/main/metaModelList',
// children: [
// {
// name: '元模型管理详情',
// path: '/main/metaModelListDetails',
// },
// ],
// },
// {
// name: '架构视图配置',
// path: '/main/archi-view-config',
// },
// {
// name: '元模型字典管理',
// path: '/main/meta-model-dic',
// },
// ],
// },
// {
// name: '总体架构资产维护',
// children: [
// {
// name: '架构资产管理',
// path: '/main/busiAssetslist',
// },
// {
// name: '架构视图管理',
// path: '/main/archiViewManage',
// children: [
// {
// name: '架构视图管理详情',
// path: '/main/archiViewManageDetails',
// },
// ],
// },
// {
// name: '数据成图',
// path: '/main/dataMapping',
// },
// {
// name: '企业中台服务清单',
// path: '/main/comCenterServeList',
// },
// {
// name: '现状架构资产管理',
// path: '/main/currentAssetsList',
// },
// {
// name: '架构演进路线资产管理',
// path: '/main/archiEvoluteLine',
// },
// {
// name: '总体架构资产可视化展示',
// path: '/main/archiAssetVisualShow',
// },
// {
// name: '总体架构资产智能搜索',
// path: '/main/archiIntelligenceSearch',
// },
// ],
// },
// ],
// },
// {
// name: '系统架构设计与管控',
// width: '1100',
// children: [
// {
// name: '系统架构资产管理',
// children: [
// {
// name: '系统信息管理',
// path: '/main/systemInfoManage',
// },
// {
// name: '项目信息管理',
// path: '/main/projectInfoManage',
// },
// {
// name: '系统架构资产维护',
// path: '/main/archiAssetManage',
// },
// ],
// },
// {
// name: '系统架构设计',
// children: [
// {
// name: '系统架构视图设计',
// path: '/main/systemArchiViewDesign',
// children: [
// {
// name: '系统架构视图设计详情',
// path: '/main/systemArchiViewDesignDetails',
// },
// ],
// },
// {
// name: '概设阶段架构设计',
// path: '/main/summaryArchiDesign',
// children: [
// {
// name: '概设阶段视图设计详情',
// path: '/main/summaryArchiDesignDetails',
// },
// ],
// },
// {
// name: '其他视图设计',
// path: '/main/otherArchiDesign',
// children: [
// {
// name: '其他视图设计详情',
// path: '/main/otherArchiDesignDetails',
// },
// ],
// },
// ],
// },
// {
// name: '系统架构管控要求',
// children: [
// {
// name: '评审情况(概要设计)',
// path: '/main/reviewSituation',
// children: [
// {
// name: '评审情况',
// path: '/main/reviewSituationDetails',
// },
// ],
// },
// {
// name: '概设架构遵从检查',
// path: '/main/reviewArchiFollowCheck',
// children: [
// {
// name: '审查',
// path: '/main/reviewArchiFollowCheckDetails',
// },
// ],
// },
// {
// name: '概设架构政策审查',
// path: '/main/reviewArchiPoliticeCheck',
// children: [
// {
// name: '审查',
// path: '/main/reviewArchiPoliticeCheckDetails',
// },
// ],
// },
// ],
// },
// {
// name: '概要设计评审',
// children: [
// {
// name: '批次计划管理',
// path: '/main/batchPlanManagement',
// },
// {
// name: '需求管理',
// path: '/main/demandManagement',
// },
// {
// name: '概设材料审查',
// path: '/main/conceptualReview',
// children: [
// {
// name: '审查',
// path: '/main/conceptualExamine',
// },
// ],
// },
// {
// name: '概设材料意见编制',
// path: '/main/conceptualViewOrg',
// children: [
// {
// name: '在线辅助审核',
// path: '/main/onlineReview',
// },
// ],
// },
// {
// name: '概设关联业务管理',
// path: '/main/conceptualRelated',
// },
// {
// name: '概设评审基础管理',
// path: '/main/conceptualBaseManagement',
// },
// ],
// },
// {
// name: '架构督查',
// children: [
// {
// name: '收集资料配置',
// path: '/main/collectDataConfiguration',
// },
// {
// name: '督查材料收集',
// path: '/main/supervisionDataCollection',
// },
// {
// name: '架构督查分析',
// path: '/main/architectureInspectionAnalysis',
// },
// {
// name: '督查通报管理',
// path: '/main/supervisionNotifyManagement',
// },
// {
// name: '督查问题整改',
// path: '/main/supervisionProblemEdit',
// },
// {
// name: '架构遵从检查',
// path: '/main/architectureFollowExamine',
// children: [
// {
// name: '遵从检查',
// path: '/main/architectureFollowExamineDetails',
// },
// ],
// },
// {
// name: '技术政策审查',
// path: '/main/artPolicyExamine',
// },
// ],
// },
// ],
// },
// {
// name: '架构资产服务与辅助分析',
// width: '220',
// children: [
// {
// name: '架构资产服务与辅助分析',
// children: [
// {
// name: '架构遵从符合度检查',
// path: '',
// },
// {
// name: '技术政策符合度检查',
// path: '',
// },
// ],
// },
// ],
// },
// {
// name: '架构知识库',
// width: '700',
// children: [
// {
// name: '专家人才库',
// children: [
// {
// name: '专家人才库管理',
// path: '/main/etp-Manage',
// },
// ],
// },
// {
// name: '技术政策库',
// children: [
// {
// name: '技术政策结构化',
// path: '/main/techPoliticsFabric',
// },
// {
// name: '技术政策库关联使用',
// path: '/main/techPoliticsRelativeUse',
// },
// ],
// },
// {
// name: '报告模板库',
// children: [
// {
// name: '报告模板结构化',
// path: '/main/reportTemplateFabric',
// },
// {
// name: '报告模板关联使用',
// path: '/main/reportTemplateRelativeUse',
// children: [
// {
// path: '/main/documentEdit',
// name: '编辑文档',
// },
// ],
// },
// ],
// },
// {
// name: '典型案例库',
// children: [
// {
// name: '典型案例库管理',
// path: '/main/typicalExampleManage',
// },
// {
// name: '典型案例库关联使用',
// path: '/main/typicalExampleRelativeUse',
// },
// {
// name: '总体架构资产文档库',
// path: '/main/totalArchiPropertyDocument',
// },
// ],
// },
// ],
// },
// {
// name: '系统管理',
// width: '220',
// children: [
// {
// name: '系统配置',
// children: [
// {
// name: '字典管理 ',
// path: '/main/dictionaryManagement',
// },
// {
// name: '组织机构管理 ',
// path: '/main/organizationManagement',
// },
// ],
// },
// ],
// },
]
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
src/views/bigScreen/digitalizeBuildAnalysis/index.vue deleted 100644 → 0
<!--
* @Description: 电网数字化项目建设分析
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-27 14:10:12
* @LastEditors: pan
* @LastEditTime: 2024-06-07 16:12:37
-->
<template>
<div class="w-100 h-100 p-10 digitalizeBuildAnalysis">
<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="initData"
>
</el-date-picker>
</div>
<div class="container">
<el-row>
<el-col :span="8">
<chart-box chart-title="统建/自建项目占比">
<BaseChart :option="chart1Options" ref="chart1" />
</chart-box>
</el-col>
<el-col :span="16">
<chart-box class="m-l-30" chart-title="总部统推系统/项目情况">
<div class="chart2 w-100 h-100 flex">
<div
class="card-item flex-column"
v-for="(item, index) in cardItems"
:key="index"
>
<div class="card-title">{{ item.title }}</div>
<div class="card-value">
<count-to
:start-val="0"
:end-val="item.value"
:duration="2000"
separator=","
autoplay
/>
<span>{{ suffixText(item.title) }}</span>
</div>
</div>
</div>
</chart-box>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<chart-box height="330px" chart-title="各省自建项目情况">
<BaseChart :option="chart3Options" ref="chart3" />
</chart-box>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<chart-box height="330px" chart-title="统推项目近五年走势">
<BaseChart :option="chart4Options" ref="chart4" />
</chart-box>
</el-col>
<el-col :span="16">
<chart-box height="330px" chart-title="各省自建项目近五年走势">
<div class="flex h-100">
<div class="flex">
<el-checkbox-group
v-model="checkList"
@change="handleCheckChange"
>
<el-checkbox
:label="item.orgCode"
v-for="(item, idx) in provinceList"
:key="item.orgCode"
><span class="province-name">{{ item.orgSimpleName }}</span
><i
:style="{ backgroundColor: provinceLineColor[idx].color }"
class="icon-line"
></i
></el-checkbox>
</el-checkbox-group>
</div>
<BaseChart :option="chart5Options" ref="chart5" />
</div>
</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 {
getProjPercent,
getHQEndYearProjInfo,
getProEndYearProjInfoNum,
getProEndYearProjInfoAmount,
getLastYearHqProjNum,
getLastYearByProProjNum,
getProinceList,
} from '@/api/bigScreen'
import chartOptions from './chartOptions.mixins'
import { getPastFiveYearList, debounce } from '@/utils'
import { provinceLineColor } from '@/config'
export default {
name: 'digitalizeBuildAnalysis',
components: {
ChartBox,
BaseChart,
CountTo,
},
mixins: [chartOptions],
data() {
return {
year: new Date().format('yyyy'),
cardItems: [
// {
// title: '统推系统数量',
// value: ''
// },
{
title: '统推项目数量',
value: 0,
},
{
title: '在建统推项目数量',
value: 0,
},
{
title: '项目总金额',
value: 0,
},
{
title: '在建项目总金额',
value: 0,
},
],
checkList: ['002'],
provinceList: [],
provinceLineColor,
}
},
mounted() {
this.initData()
},
methods: {
initData() {
this.getProjPercent()
this.getHQEndYearProjInfo()
this.getProvincePrjInfo()
this.getLastYearHqProjNum()
this.getProinceList()
},
// 统推/自建项目占比
getProjPercent() {
getProjPercent({ year: this.year }).then((res) => {
if (res.code === 200) {
const buildType1 = res.data.find((v) => v.build_type == 1) || {}
const buildType2 = res.data.find((v) => v.build_type == 2) || {}
this.chart1SumList = [
{
value: buildType1.amount,
name: '统推项目金额',
},
{
value: buildType2.amount,
name: '自建项目金额',
},
]
this.chart1NumList = [
{
value: buildType1.count,
name: '统推项目数量',
},
{
value: buildType2.count,
name: '自建项目数量',
},
]
} else {
this.$message.warning(res.msg)
}
})
},
// 总部统推系统/项目情况
getHQEndYearProjInfo() {
getHQEndYearProjInfo({ year: this.year }).then((res) => {
if (res.code === 200) {
this.cardItems[0].value = res.data.count
this.cardItems[1].value = res.data.now_count
this.cardItems[2].value = res.data.amount ? res.data.amount : 0
this.cardItems[3].value = res.data.now_amount
? res.data.now_amount
: 0
} else {
this.$message.warning(res.msg)
}
})
},
// 各省自建项目情况
getProvincePrjInfo() {
this.$refs.chart3.chart.showLoading({
text: '加载中...',
color: SystemConfig.DEFAULT_PRIMARY_COLOR,
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
})
this.buildingPrjNumList = []
this.prjNumList = []
this.prjSumList = []
this.buildingPrjSumList = []
const params = { year: this.year }
Promise.all([
getProEndYearProjInfoNum(params),
getProEndYearProjInfoAmount(params),
])
.then((res) => {
this.$refs.chart3.chart.hideLoading()
this.chart3XAxisData = res[0].data.map((v) => v.orgName)
res[0].data.forEach((v) => {
this.buildingPrjNumList.push(v.totalNowNum || 0)
this.prjNumList.push(v.totalNum || 0)
})
res[1].data.forEach((v) => {
this.prjSumList.push(v.amount || 0)
this.buildingPrjSumList.push(v.nowAmount || 0)
})
})
.catch((err) => {
console.log(err)
})
},
// 统推项目近五年走势
getLastYearHqProjNum() {
getLastYearHqProjNum({ year: this.year }).then((res) => {
if (res.code === 200) {
const fiveYear = getPastFiveYearList()
this.chart4List = fiveYear.map((v) => {
const obj = res.data.find((r) => r.year == v) || {}
return obj.totalNum || 0
})
} else {
this.$message.warning(res.msg)
}
})
},
getProinceList() {
getProinceList().then((res) => {
if (res.code === 200) {
this.provinceList = res.data
this.getLastYearByProProjNum()
}
})
},
// 各省自建项目近五年走势
getLastYearByProProjNum() {
const params = {
year: this.year,
orgCodes: this.checkList.join(','),
}
this.$refs.chart5?.chart.showLoading({
text: '加载中...',
color: SystemConfig.DEFAULT_PRIMARY_COLOR,
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
})
getLastYearByProProjNum(params).then((res) => {
this.$refs.chart5?.chart.hideLoading()
if (res.code === 200) {
const fiveYear = getPastFiveYearList()
this.chart5List = res.data.map((v) => {
const data = fiveYear.map((f) => {
return v[`${f}年`] || 0
})
const colorObj =
provinceLineColor.find((c) => c.name === v.simpleName) || {}
return {
data,
color: colorObj.color,
name: v.simpleName,
type: 'line',
}
})
} else {
this.$message.warning(res.msg)
}
})
},
suffixText(title) {
if (title.includes('数量')) {
return '个'
} else {
return '万元'
}
},
handleCheckChange: debounce(function () {
this.getLastYearByProProjNum()
}, 1000),
},
}
</script>
<style scoped lang="scss">
.digitalizeBuildAnalysis {
box-sizing: border-box;
overflow-y: auto;
}
.chart2 {
background-color: #8693f3;
border-radius: 5px;
}
.card-item {
padding: 20px 10px;
box-sizing: border-box;
position: relative;
width: 25%;
.card-title {
font-size: 16px;
margin-top: 20px;
color: #ffffff;
font-weight: 500;
}
.card-value {
color: #ffffff;
font-size: 26px;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
font-weight: bold;
}
&:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 30px;
width: 1px;
height: calc(100% - 60px);
background-color: #ffffff;
}
}
/deep/ .el-checkbox-group {
width: 320px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
.el-checkbox {
margin-right: 0;
width: 33.33%;
display: flex;
margin-bottom: 10px;
.province-name {
width: 40px;
display: inline-block;
text-align: left;
}
.icon-line {
width: 20px;
display: inline-block;
height: 2px;
vertical-align: super;
}
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!