Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 2219869c by 史敦盼
Options

智能驾驶舱

1 parent 22de08a7
Expand all
Inline Side-by-side
Showing with 530 additions and 26 deletions
src/api/bigScreen.js
/*
* @Description: 架构全景大屏及智能驾驶舱接口
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-29 16:04:01
* @LastEditors: pan
* @LastEditTime: 2024-06-05 14:44:06
*/
import { post } from '@/utils/http'
import {
EADC_ARRCHITECTURE,
EADC_SHARED_ABILITY
} from '@/config/micromodule'
const base = '/creen'
const [base, cockpit] = ['/creen', '/smart-cockpit']
// 架构全景智能大屏------------------------
// 统推项目和自建项目占比
export function getProjPercent(params) {
return post(EADC_ARRCHITECTURE + `${base}/getProjPercent`, params)
......@@ -37,4 +46,24 @@ export function getProinceList(params) {
// 根据架构、元素对资产数据进行分类展示
export function getAssetTypeDataByYearCount(params) {
return post(EADC_ARRCHITECTURE + `${base}/getAssetTypeDataByYearCount`, params)
}
\ No newline at end of file
}
// 智能驾驶舱---------------------
// 组织机构树
export function getOrgTree(params) {
return post(EADC_ARRCHITECTURE + `${cockpit}/orgTree`, params)
}
// 统计业务
export function getCountBusiness(params) {
return post(EADC_ARRCHITECTURE + `${cockpit}/countBusiness`, params)
}
// 项目管理信息
export function getPrjInfo(params) {
return post(EADC_ARRCHITECTURE + `${cockpit}/prjInfo`, params)
}
// 架构视图
export function getViewInfo(params) {
return post(EADC_ARRCHITECTURE + `${cockpit}/view`, params)
}
src/components/ChoosePrjDialog.vue
<!--
* @Description: 选择项目组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-29 16:57:25
* @LastEditors: pan
* @LastEditTime: 2024-06-05 19:46:56
-->
<template>
<el-dialog
title="选择项目"
......@@ -26,7 +34,7 @@
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()" size="mini">取 消</el-button>
<el-button type="primary" @click="handleConfirm()" size="mini"
<el-button type="primary" v-preventReClick @click="handleConfirm()" size="mini"
>确 定</el-button
>
</span></el-dialog
......@@ -78,7 +86,7 @@ export default {
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
options: this.sysOrgOptions,
filterable: true
filterable: true,
},
{
label: '部门', // label文字
......@@ -87,7 +95,7 @@ export default {
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
options: this.sysDeptOptions,
filterable: true
filterable: true,
},
{
label: '系统名称', // label文字
......@@ -113,14 +121,14 @@ export default {
{
label: '单位',
prop: 'manageOrgId',
width: '200px',
width: '200px',
options: this.sysOrgOptions,
collectionType: true,
},
{
label: '部门',
prop: 'manageDeptId',
width: '200px',
width: '200px',
options: this.sysDeptOptions,
collectionType: true,
},
......
src/router/index.js
......@@ -587,6 +587,15 @@ export const routes = [
title: "公司架构蓝图实现情况分析",
},
},
{
path: "/main/manageCockpit",
name: "manageCockpit",
component: () => import("@/views/bigScreen/cockpit/manageCockpit/index.vue"),
meta: {
title: "管理智能驾驶舱",
keepAlive: true,
},
},
],
},
......
src/styles/common.scss
......@@ -117,6 +117,15 @@ $color-primary: #0d867f;
.font-bold {
font-weight: bold;
}
.align-l {
text-align: left;
}
.align-r {
text-align: right;
}
.align-c {
text-align: center;
}
.searchTable {
width: 100%;
......
src/styles/elementui.scss
......@@ -11,7 +11,7 @@ $color-primary: #0d857f;
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
color: #fff!important;
}
/deep/ .el-dialog__headerbtn:focus .el-dialog__close,
/deep/ .el-dialog__headerbtn:hover .el-dialog__close {
......
src/views/Main/components/AppMain.vue
......@@ -31,9 +31,9 @@ export default {
// position: relative;
// overflow: hidden;
display: flex;
height: calc(100% - 220px);
width: calc(100% - 40px);
margin: 70px 20px 20px 20px;
height: calc(100% - 184px);
width: calc(100% - 24px);
margin: 0 12px 10px 12px;
border-top: 6px solid #0d867f;
box-shadow: 10px 10px 30px 30px rgba(201, 226, 225, 1);
}
......
src/views/Main/components/TagsView/index.vue
......@@ -237,7 +237,7 @@ export default {
padding-right: 20px!important;
}
.tags-view-container {
height: 34px;
height: 32px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
......@@ -254,7 +254,7 @@ export default {
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
font-size: 14px;
margin-left: 5px;
margin-top: 4px;
......
src/views/Main/index.scss
......@@ -13,7 +13,7 @@
}
.top_menu_container {
/* margin-bottom: 20px; */
height: 125px;
// height: 125px;
}
.left_menu_and_drawio_container {
display: flex;
......@@ -32,7 +32,7 @@
width: 6%;
} */
.logo_title_container {
height: 64px;
height: 55px;
display: flex;
align-items: center;
background-color: rgb(13, 134, 127);
......@@ -155,7 +155,7 @@
&::after {
content: '';
position: absolute;
bottom: -17px;
bottom: -12px;
left: -20px;
width: calc(100% + 20px);
height: 4px;
......@@ -223,7 +223,7 @@
display: flex;
align-items: center;
justify-content: center;
height: 60px;
height: 50px;
}
.menu_1_container {
display: flex;
......
src/views/Main/menu.js
......@@ -21,7 +21,7 @@ export const menuOptions = [
children: [
{
name: '管理智能驾驶舱',
path: '',
path: '/main/manageCockpit',
},
{
name: '业务智能驾驶舱',
......
src/views/bigScreen/cockpit/components/ProjectInfo.vue 0 → 100644
<!--
* @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: 'buildType',
},
{
label: '项目名称',
value: '',
key: 'prjName',
},
{
label: '项目类型',
value: '',
},
{
label: '业务部门',
value: '',
},
{
label: '承建单位',
value: '',
},
{
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 0 → 100644
<!--
* @Description: 智能驾驶舱模块 视图信息组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 10:20:36
* @LastEditors: pan
* @LastEditTime: 2024-06-07 16:43:28
-->
<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">
<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
}
},
components: {},
created() {
this.getArchiBelong()
},
methods: {
getSvg(base64) {
return `data:image/svg+xml;base64,${base64}`
},
fnCheckGraph(item) {
this.graph.destroy()
this.initGraph(item.metaModelData)
},
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.$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: 240px;
height: 140px;
}
}
}
.mxGraph {
overflow: auto;
}
}
</style>
src/views/bigScreen/cockpit/manageCockpit/index.vue 0 → 100644
<!--
* @Description: 管理智能驾驶舱
* @Version: 2.0
* @Autor: pan
* @Date: 2024-06-05 09:51:26
* @LastEditors: pan
* @LastEditTime: 2024-06-07 15:17:16
-->
<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/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-05-27 14:10:12
* @LastEditors: pan
* @LastEditTime: 2024-06-03 20:58:45
* @LastEditTime: 2024-06-07 16:12:37
-->
<template>
<div class="w-100 h-100 p-10 digitalizeBuildAnalysis">
......@@ -197,11 +197,9 @@ export default {
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
? Math.ceil(res.data.amount / 10000)
: 0
this.cardItems[2].value = res.data.amount ? res.data.amount : 0
this.cardItems[3].value = res.data.now_amount
? Math.ceil(res.data.now_amount / 10000)
? res.data.now_amount
: 0
} else {
this.$message.warning(res.msg)
......@@ -234,8 +232,8 @@ export default {
this.prjNumList.push(v.totalNum || 0)
})
res[1].data.forEach((v) => {
this.prjSumList.push(v.amount / 10000 || 0)
this.buildingPrjSumList.push(v.nowAmount / 10000 || 0)
this.prjSumList.push(v.amount || 0)
this.buildingPrjSumList.push(v.nowAmount || 0)
})
})
.catch((err) => {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!