Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 24875edc by 史敦盼
Options

大屏,选择项目公共组件

1 parent daf5e126
Expand all
Inline Side-by-side
Showing with 780 additions and 3 deletions
src/components/Charts/ChartBox.vue 0 → 100644
<template>
<div class="chart-box">
<div class="chart-title">{{ chartTitle }}</div>
<div class="chart-height" :style="{ height }">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
chartTitle: {
type: String,
default: '',
required: true,
},
height: {
type: String,
default: '240px',
},
},
}
</script>
<style scoped lang="scss">
.chart-title {
font-weight: 500;
font-size: 14px;
color: #000;
position: relative;
padding-left: 10px;
text-align: left;
margin-bottom: 14px;
&::before {
position: absolute;
content: '';
left: 0;
top: 3px;
width: 4px;
height: 15px;
background-color: rgba(13, 134, 127, 1);
border-radius: 2px;
}
}
</style>
src/router/index.js
......@@ -571,6 +571,23 @@ 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: "公司架构蓝图实现情况分析",
},
},
],
},
];
......
src/views/Main/menu.js
......@@ -7,12 +7,12 @@ export const menuOptions = [
name: '架构全景智能大屏',
children: [
{
name: 'XX网数字化项目建设分析',
path: '',
name: '电网数字化项目建设分析',
path: '/main/digitalizeBuildAnalysis',
},
{
name: '公司架构蓝图实现情况分析',
path: '',
path: '/main/architectureBlueprintAnalysis',
},
],
},
......
src/views/bigScreen/architectureBlueprintAnalysis/index.vue 0 → 100644
<!--
* @Description: 公司架构蓝图实现情况分析
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-28 18:59:07
* @LastEditors: pan
* @LastEditTime: 2024-05-29 09:37:21
-->
<template>
<div class="w-100 h-100 p-10 architectureBlueprintAnalysis">
<div class="filter-year m-b-10">
<el-date-picker
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-sys'],
count2: ARCHI_BUSINESS && ARCHI_BUSINESS['busDomainNum'],
},
{
title: '业务职能',
count1: 595,
count2: 624,
},
{
title: '业务流程',
count1: ARCHI_BUSINESS && ARCHI_BUSINESS['busProcessNum-sys'],
count2: ARCHI_BUSINESS && ARCHI_BUSINESS['busProcessNum'],
},
],
},
{
title: '应用架构资产',
bgColor: '#b591e8',
countItems: [
{
title: '应用',
count1: 12,
count2: 14,
},
{
title: '一级功能',
count1:
ARCHI_APPLICATION && ARCHI_APPLICATION['oneLevelAppCount-sys'],
count2:
ARCHI_APPLICATION && ARCHI_APPLICATION['oneLevelAppCount'],
},
{
title: '二级功能',
count1:
ARCHI_APPLICATION && ARCHI_APPLICATION['twoLevelAppCount-sys'],
count2:
ARCHI_APPLICATION && ARCHI_APPLICATION['twoLevelAppCount'],
},
],
},
{
title: '数据架构资产',
bgColor: '#e192a6',
countItems: [
{
title: '一级主题域',
count1: ARCHI_DATA && ARCHI_DATA['oneLevelDataCount-sys'],
count2: ARCHI_DATA && ARCHI_DATA['oneLevelDataCount'],
},
{
title: '二级主题域',
count1: ARCHI_DATA && ARCHI_DATA['twoLevelDataCount-sys'],
count2: ARCHI_DATA && ARCHI_DATA['twoLevelDataCount'],
},
{
title: '概念实体',
count1: ARCHI_DATA && ARCHI_DATA['systemTotal'],
count2: ARCHI_DATA && ARCHI_DATA['totalityTotal'],
},
],
},
{
title: '技术架构资产',
bgColor: '#93afe9',
countItems: [
{
title: '技术域',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecDomainNum-sys'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecDomainNum'],
},
{
title: '技术能力',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecAbilityNum-sys'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecAbilityNum'],
},
{
title: '技术组件',
count1: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecModulNum-sys'],
count2: ARCHI_TECHNOLOGY && ARCHI_TECHNOLOGY['tecModulNum'],
},
],
},
{
title: '安全架构资产',
bgColor: '#a4ebaf',
countItems: [
{
title: '防护对象',
count1: 12,
count2: 14,
},
{
title: '防护要求',
count1: 595,
count2: 624,
},
{
title: '防护措施',
count1: 2869,
count2: 2967,
},
],
},
]
},
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/digitalizeBuildAnalysis/chartOptions.mixins.js 0 → 100644
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: 100,
interval: 20,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
},
{
type: 'value',
name: '万元',
min: 0,
max: 700,
interval: 100,
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/demandManagement/ChoosePrjDialog.vue 0 → 100644
<template>
<el-dialog
title="选择项目"
:visible.sync="showDialog"
:center="false"
:close-on-click-modal="false"
width="80%"
>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
>
</table-config>
</template>
</list-page>
</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
>
</span></el-dialog
>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/components/TableConfig.vue'
import { queryProjectInfo } from '@/api/interface'
import { buildType, prjPlanClass } from '@/utils/dictionary'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
data() {
return {
query: {
url: queryProjectInfo,
method: 'post',
queryParam: {},
},
selectRows: [],
}
},
components: { ListPage, SearchForm, TableConfig },
computed: {
formOptions() {
return [
{
label: '单位', // label文字
prop: 'manageOrgId', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '部门', // label文字
prop: 'manageDeptId', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '系统名称', // label文字
prop: 'appName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '建设类型', // label文字
prop: 'needType', // 字段名
element: 'el-select', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
dictType: 'build_type',
},
]
},
columns() {
return [
{ type: 'selection', width: '55px' },
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'manageOrgId' },
{ label: '部门', prop: 'manageDeptId' },
{ label: '系统名称', prop: 'appName', width: '200px' },
{
label: '建设类型',
width: '100px',
prop: 'buildType',
options: buildType,
collectionType: 'buildType',
},
{
label: '项目名称',
prop: 'prjName',
width: '320px',
},
{
label: '是否续建',
prop: 'prjPlanClass',
options: prjPlanClass,
collectionType: 'prjPlanClass',
},
{ label: '承建单位', prop: 'buildOrg' },
{ label: '项目经理', prop: 'projectManager' },
{ label: '创建人', prop: 'createMan' },
{ label: '创建时间', prop: 'createTime' },
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
clearSelection() {
this.$refs['searchTable'].clearSelection()
},
handleClose() {
this.showDialog = false
this.selectRows = []
this.clearSelection()
},
handleConfirm() {
if (this.selectRows.length === 0) {
return this.$message.warning('请选择至少一条数据')
} else if (this.selectRows.length > 1) {
return this.$message.warning('只能选择一条数据')
}
this.$emit('selectData', this.selectRows)
this.handleClose()
},
// 表格勾选的数据
selectionChange(data) {
console.log('selectionChange', data)
this.selectRows = data
},
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
::v-deep .el-dialog__body {
height: 500px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!