wuxueyu
/
Industrial-image-management-system---web
1
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

侧边栏结构修改

This commit is contained in:
wxy 2025-07-21 08:25:03 +08:00
parent ba041b3f3a
commit 6e92ac705c
6 changed files with 1197 additions and 639 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

431
src/router/route.ts
View File

@ -198,6 +198,58 @@ export const systemRoutes: RouteRecordRaw[] = [
redirect: '/asset-management/device/inventory', redirect: '/asset-management/device/inventory',
meta: { title: '资产管理', icon: 'property-safety', hidden: false, sort: 3 }, meta: { title: '资产管理', icon: 'property-safety', hidden: false, sort: 3 },
children: [ children: [
{
path: '/asset-management/intellectual-property1',
name: 'IntellectualProperty1',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '设备管理', icon: 'copyright', hidden: false },
children:[
{
path: '/asset-management/intellectual-property1',
name: 'IntellectualProperty11',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '库存管理', hidden: false },
},
{
path: '/asset-management/intellectual-property1',
name: 'IntellectualProperty12',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '设备采购', hidden: false },
},
{
path: '/asset-management/intellectual-property1',
name: 'IntellectualProperty13',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '在线管理', hidden: false },
children:[
{
path: '/asset-management/intellectual-property11',
name: 'IntellectualProperty14',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '无人机', hidden: false },
},
{
path: '/asset-management/intellectual-property12',
name: 'IntellectualProperty15',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '机巢', hidden: false },
},
{
path: '/asset-management/intellectual-property13',
name: 'IntellectualProperty16',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '其他智能终端', hidden: false },
},
{
path: '/asset-management/intellectual-property14',
name: 'IntellectualProperty17',
component: () => import('@/views/system-resource/information-system/software-management/index.vue'),
meta: { title: '车辆管理', hidden: false },
}
]
}
]
},
{ {
path: '/asset-management/intellectual-property', path: '/asset-management/intellectual-property',
name: 'IntellectualProperty', name: 'IntellectualProperty',
@ -354,6 +406,100 @@ export const systemRoutes: RouteRecordRaw[] = [
redirect: '/project-management/project-template/tender-documents', redirect: '/project-management/project-template/tender-documents',
meta: { title: '项目管理', icon: 'apps', hidden: false, sort: 4 }, meta: { title: '项目管理', icon: 'apps', hidden: false, sort: 4 },
children: [ children: [
{
path: '/project-management/contract',
name: 'ProjectContract',
component: () => import('@/components/ParentView/index.vue'),
redirect: '/project-management/contract/revenue-contract',
meta: {
title: '市场商务管理',
icon: 'file-text',
hidden: false
},
children: [
{
path: '/project-management/contract/revenue-contract',
name: 'RevenueContract',
component: () => import('@/views/project-management/contract/revenue-contract/index.vue'),
meta: {
title: '项目来源',
icon: 'dollar',
hidden: false
},
children:[
{
path: '/project-management/contract/revenue-contract1',
name: 'RevenueContract1',
meta: {
title: '招采业务',
icon: 'dollar',
hidden: false
}
},
{
path: '/project-management/contract/revenue-contract2',
name: 'RevenueContract2',
meta: {
title: '市场营销',
icon: 'dollar',
hidden: false
}
},
{
path: '/project-management/contract/revenue-contract3',
name: 'RevenueContract3',
meta: {
title: '自建项目',
icon: 'dollar',
hidden: false
}
},
]
},
{
path: '/project-management/contract/revenue-contract',
name: 'RevenueContract',
component: () => import('@/views/project-management/contract/revenue-contract/index.vue'),
meta: {
title: '项目合同管理',
icon: 'dollar',
hidden: false
},
children:[
{
path: '/project-management/contract/revenue-contract',
name: 'RevenueContract',
component: () => import('@/views/project-management/contract/revenue-contract/index.vue'),
meta: {
title: '收入合同',
icon: 'dollar',
hidden: false
}
},
{
path: '/project-management/contract/expense-contract',
name: 'ExpenseContract',
component: () => import('@/views/project-management/contract/expense-contract/index.vue'),
meta: {
title: '支出合同',
icon: 'credit-card',
hidden: false
}
},
{
path: '/project-management/contract/cost-management',
name: 'CostManagement',
component: () => import('@/views/project-management/contract/cost-management/index.vue'),
meta: {
title: '成本费用',
icon: 'bar-chart',
hidden: false
}
}
]
}
]
},
{ {
path: '/project-management/project-template', path: '/project-management/project-template',
name: 'ProjectTemplate', name: 'ProjectTemplate',
@ -407,49 +553,6 @@ export const systemRoutes: RouteRecordRaw[] = [
}, },
] ]
}, },
{
path: '/project-management/contract',
name: 'ProjectContract',
component: () => import('@/components/ParentView/index.vue'),
redirect: '/project-management/contract/revenue-contract',
meta: {
title: '市场商务管理',
icon: 'file-text',
hidden: false
},
children: [
{
path: '/project-management/contract/revenue-contract',
name: 'RevenueContract',
component: () => import('@/views/project-management/contract/revenue-contract/index.vue'),
meta: {
title: '收入合同',
icon: 'dollar',
hidden: false
}
},
{
path: '/project-management/contract/expense-contract',
name: 'ExpenseContract',
component: () => import('@/views/project-management/contract/expense-contract/index.vue'),
meta: {
title: '支出合同',
icon: 'credit-card',
hidden: false
}
},
{
path: '/project-management/contract/cost-management',
name: 'CostManagement',
component: () => import('@/views/project-management/contract/cost-management/index.vue'),
meta: {
title: '成本费用',
icon: 'bar-chart',
hidden: false
}
}
]
},
{ {
path: '/project-management/projects', path: '/project-management/projects',
name: 'ProjectsManagement', name: 'ProjectsManagement',
@ -461,7 +564,7 @@ export const systemRoutes: RouteRecordRaw[] = [
hidden: false hidden: false
}, },
children: [ children: [
{ {
path: '/project-management/projects/progress', path: '/project-management/projects/progress',
name: 'ProjectProgress', name: 'ProjectProgress',
@ -533,19 +636,19 @@ export const systemRoutes: RouteRecordRaw[] = [
redirect: '/construction-operation-platform/implementation-workflow/field-construction', redirect: '/construction-operation-platform/implementation-workflow/field-construction',
meta: { title: '施工操作台', icon: 'tool', hidden: false, sort: 5 }, meta: { title: '施工操作台', icon: 'tool', hidden: false, sort: 5 },
children: [ children: [
{ // {
path: '/construction-operation-platform/implementation-workflow', // path: '/construction-operation-platform/implementation-workflow',
name: 'ImplementationWorkflow', // name: 'ImplementationWorkflow',
component: () => import('@/components/ParentView/index.vue'), // component: () => import('@/components/ParentView/index.vue'),
redirect: '/construction-operation-platform/implementation-workflow/field-construction', // redirect: '/construction-operation-platform/implementation-workflow/field-construction',
meta: { title: '项目实施工作流程', icon: 'fork', hidden: false }, // meta: { title: '项目实施工作流程', icon: 'fork', hidden: false },
children: [ // children: [
{ {
path: '/construction-operation-platform/implementation-workflow/field-construction', path: '/construction-operation-platform/implementation-workflow/field-construction',
name: 'FieldConstruction', name: 'FieldConstruction',
component: () => import('@/components/ParentView/index.vue'), component: () => import('@/components/ParentView/index.vue'),
redirect: '/construction-operation-platform/implementation-workflow/field-construction/project-list', redirect: '/construction-operation-platform/implementation-workflow/field-construction/project-list',
meta: { title: '外业施工', icon: 'construction', hidden: false }, meta: { title: '我的项目', icon: 'construction', hidden: false },
children: [ children: [
{ {
path: '/project-management/projects/list', path: '/project-management/projects/list',
@ -561,29 +664,42 @@ export const systemRoutes: RouteRecordRaw[] = [
path: '/construction-operation-platform/implementation-workflow/field-construction/technology', path: '/construction-operation-platform/implementation-workflow/field-construction/technology',
name: 'FieldConstructionTechnology', name: 'FieldConstructionTechnology',
component: () => import('@/views/project-operation-platform/implementation-workflow/field-construction/project-list/index.vue'), component: () => import('@/views/project-operation-platform/implementation-workflow/field-construction/project-list/index.vue'),
meta: { title: '现场工艺', icon: 'tool', hidden: false }, meta: { title: '我的施工', icon: 'tool', hidden: false },
} },
]
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing',
name: 'DataProcessing',
component: () => import('@/components/ParentView/index.vue'),
redirect: '/construction-operation-platform/implementation-workflow/data-processing/data-storage',
meta: { title: '数据处理', icon: 'filter', hidden: false },
children: [
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage', path: '/construction-operation-platform/implementation-workflow/data-processing',
name: 'DataStorage', name: 'DataProcessing',
component: () => import('@/components/ParentView/index.vue'), component: () => import('@/components/ParentView/index.vue'),
redirect: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/raw-data', redirect: '/construction-operation-platform/implementation-workflow/data-processing/data-storage',
meta: { title: '数据入库', icon: 'database', hidden: false }, meta: { title: '我的业务数据', icon: 'filter', hidden: false },
children: [ children: [
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/raw-data', path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage',
name: 'RawData', name: 'DataStorage',
component: () => import('@/views/operation-platform/data-processing/data-storage/index.vue'), component: () => import('@/components/ParentView/index.vue'),
meta: { title: '原数据管理', icon: 'file', hidden: false }, redirect: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/raw-data',
meta: { title: '原数据管理', icon: 'database', hidden: false },
children: [
{
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/raw-data',
name: 'RawData',
component: () => import('@/views/operation-platform/data-processing/data-storage/index.vue'),
meta: { title: '原数据管理', icon: 'file', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/attachment',
name: 'AttachmentManagement',
component: () => import('@/views/operation-platform/data-processing/data-storage/index.vue'),
meta: { title: '附件管理', icon: 'attachment', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/model-config',
name: 'ModelConfig',
component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/model-config/index.vue'),
meta: { title: '模型配置', icon: 'robot', hidden: false },
},
]
}, },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/preprocessed-data', path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/preprocessed-data',
@ -592,71 +708,97 @@ export const systemRoutes: RouteRecordRaw[] = [
meta: { title: '数据预处理', icon: 'filter', hidden: false }, meta: { title: '数据预处理', icon: 'filter', hidden: false },
}, },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/attachment', path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection',
name: 'AttachmentManagement', name: 'IntelligentInspection',
component: () => import('@/views/operation-platform/data-processing/data-storage/index.vue'), component: () => import('@/components/ParentView/index.vue'),
meta: { title: '附件管理', icon: 'attachment', hidden: false }, redirect: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm',
}, meta: { title: '数据分析与图像检测', icon: 'scan', hidden: false },
{ children: [
path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/model-config', {
name: 'ModelConfig', path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/tree-visualization',
component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/model-config/index.vue'), name: 'TreeVisualization',
meta: { title: '模型配置', icon: 'robot', hidden: false }, component: () => import('@/views/project-operation-platform/data-processing/key-info-extraction/index.vue'),
}, meta: { title: '可视化管理', icon: 'cluster', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm',
name: 'DefectAlgorithm',
component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm/index.vue'),
meta: { title: '缺陷检测', icon: 'code', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/report-generation',
name: 'ReportGeneration',
component: () => import('@/views/project-operation-platform/data-processing/report-generation/index.vue'),
meta: { title: '报告生成', icon: 'file-add', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/standard-info',
name: 'StandardInfo',
component: () => import('@/views/project-operation-platform/data-processing/standard-info/index.vue'),
meta: { title: '标准信息库', icon: 'book', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/report-review',
name: 'ReportReview',
component: () => import('@/views/project-operation-platform/data-processing/report-review/index.vue'),
meta: { title: '报告修改审核', icon: 'audit', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/lifecycle-management',
name: 'LifecycleManagement',
component: () => import('@/views/project-operation-platform/lifecycle-management/index.vue'),
meta: { title: '全生命周期管理', icon: 'reload', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/drone-services',
name: 'DroneServices',
component: () => import('@/views/project-operation-platform/route-planning/index.vue'),
meta: { title: '无人机云服务', icon: 'cloud-server', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/airport-management',
name: 'AirportManagement',
component: () => import('@/views/construction-operation-platform/airport-management/index.vue'),
meta: { title: '机场管理', icon: 'rocket', hidden: false },
},
]
}
] ]
}, },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection', path: '/construction-operation-platform/implementation-workflow/project-delivery',
name: 'IntelligentInspection', name: 'ProjectDelivery',
component: () => import('@/components/ParentView/index.vue'), component: () => import('@/components/ParentView/index.vue'),
redirect: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm', redirect: '/construction-operation-platform/implementation-workflow/project-delivery/delivery-overview',
meta: { title: '智能巡检平台', icon: 'scan', hidden: false }, meta: { title: '项目交付', icon: 'check-circle', hidden: false },
children: [ children: [
// {
// path: '/construction-operation-platform/implementation-workflow/project-delivery/delivery-overview',
// name: 'DeliveryOverview',
// component: () => import('@/views/project-operation-platform/quality-management/process-verification/index.vue'),
// meta: { title: '交付概览', icon: 'dashboard', hidden: false },
// },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm', path: '/construction-operation-platform/implementation-workflow/project-delivery/reliability-assessment',
name: 'DefectAlgorithm', name: 'ReliabilityAssessment',
component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm/index.vue'), component: () => import('@/views/project-operation-platform/quality-management/process-verification/index.vue'),
meta: { title: '缺陷检测算法', icon: 'code', hidden: false }, meta: { title: '可靠性评估', icon: 'safety-certificate', hidden: false },
}, },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/tree-visualization', path: '/construction-operation-platform/implementation-workflow/project-delivery/data-quality-assessment',
name: 'TreeVisualization', name: 'DataQualityAssessment',
component: () => import('@/views/project-operation-platform/data-processing/key-info-extraction/index.vue'), component: () => import('@/views/project-operation-platform/data-processing/data-quality-assessment/index.vue'),
meta: { title: '树状可视化管理', icon: 'cluster', hidden: false }, meta: { title: '数据质量评估', icon: 'audit', hidden: false },
}, },
{ {
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/standard-info', path: '/construction-operation-platform/implementation-workflow/project-delivery/defect-storage',
name: 'StandardInfo', name: 'DefectStorage',
component: () => import('@/views/project-operation-platform/data-processing/standard-info/index.vue'), component: () => import('@/views/project-operation-platform/quality-management/defect-storage/index.vue'),
meta: { title: '标准信息库', icon: 'book', hidden: false }, meta: { title: '质量入库', icon: 'folder-add', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/report-generation',
name: 'ReportGeneration',
component: () => import('@/views/project-operation-platform/data-processing/report-generation/index.vue'),
meta: { title: '报告生成', icon: 'file-add', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/lifecycle-management',
name: 'LifecycleManagement',
component: () => import('@/views/project-operation-platform/lifecycle-management/index.vue'),
meta: { title: '全生命周期管理', icon: 'reload', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/drone-services',
name: 'DroneServices',
component: () => import('@/views/project-operation-platform/route-planning/index.vue'),
meta: { title: '无人机云服务', icon: 'cloud-server', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/report-review',
name: 'ReportReview',
component: () => import('@/views/project-operation-platform/data-processing/report-review/index.vue'),
meta: { title: '报告修改审核', icon: 'audit', hidden: false },
} }
] ]
} },
] ]
}, },
{ {
@ -686,30 +828,15 @@ export const systemRoutes: RouteRecordRaw[] = [
} }
] ]
}, },
{
path: '/construction-operation-platform/implementation-workflow/project-delivery', // {
name: 'ProjectDelivery', // path: '/construction-operation-platform/implementation-workflow/project-delivery',
component: () => import('@/views/project-operation-platform/quality-management/process-verification/index.vue'), // name: 'ProjectDelivery',
meta: { title: '项目交付', icon: 'check-circle', hidden: false }, // component: () => import('@/components/ParentView/index.vue'),
}, // redirect: '/construction-operation-platform/implementation-workflow/project-delivery/delivery-overview',
{ // meta: { title: '机场管理', icon: 'check-circle', hidden: false },
path: '/construction-operation-platform/implementation-workflow/reliability-assessment', // },
name: 'ReliabilityAssessment',
component: () => import('@/views/project-operation-platform/quality-management/process-verification/index.vue'),
meta: { title: '可靠性评估', icon: 'safety-certificate', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/data-quality-assessment',
name: 'DataQualityAssessment',
component: () => import('@/views/project-operation-platform/data-processing/data-quality-assessment/index.vue'),
meta: { title: '数据质量评估', icon: 'audit', hidden: false },
},
{
path: '/construction-operation-platform/implementation-workflow/defect-storage',
name: 'DefectStorage',
component: () => import('@/views/project-operation-platform/quality-management/defect-storage/index.vue'),
meta: { title: '缺陷入库', icon: 'folder-add', hidden: false },
},
{ {
path: '/construction-operation-platform/implementation-workflow/other', path: '/construction-operation-platform/implementation-workflow/other',
name: 'Other', name: 'Other',
@ -738,9 +865,9 @@ export const systemRoutes: RouteRecordRaw[] = [
] ]
} }
] ]
} },
], // ],
}, // },
{ {
path: '/chat-platform', path: '/chat-platform',
name: 'ChatPlatform', name: 'ChatPlatform',
@ -802,7 +929,7 @@ export const systemRoutes: RouteRecordRaw[] = [
name: 'VersionUpgrade', name: 'VersionUpgrade',
component: () => import('@/views/enterprise-settings/version-upgrade/index.vue'), component: () => import('@/views/enterprise-settings/version-upgrade/index.vue'),
meta: { meta: {
title: '版本升级提醒', title: '版本升级提醒',
icon: 'upgrade', icon: 'upgrade',
hidden: false hidden: false
} }

431
src/views/construction-operation-platform/airport-management/index.vue Normal file
View File

@ -0,0 +1,431 @@
<template>
<div class="airport-management">
<div class="page-header">
<a-card class="general-card" title="机场管理">
<template #extra>
<a-button type="primary" @click="handleAdd">
<template #icon>
<icon-plus />
</template>
新建机场
</a-button>
</template>
<a-row :gutter="16" style="margin-bottom: 16px">
<a-col :span="6">
<a-input-search
v-model="searchForm.name"
placeholder="请输入机场名称"
@search="search"
allow-clear
/>
</a-col>
<a-col :span="6">
<a-select
v-model="searchForm.status"
placeholder="请选择状态"
allow-clear
style="width: 100%"
>
<a-option value="1">运营中</a-option>
<a-option value="0">停运</a-option>
</a-select>
</a-col>
<a-col :span="6">
<a-button type="primary" @click="search">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button style="margin-left: 8px" @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-col>
</a-row>
</a-card>
</div>
<div class="page-content">
<a-card class="general-card">
<a-table
:columns="columns"
:data="tableData"
:loading="loading"
:pagination="pagination"
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
>
<template #status="{ record }">
<a-tag :color="record.status === '1' ? 'green' : 'red'">
{{ record.status === '1' ? '运营中' : '停运' }}
</a-tag>
</template>
<template #actions="{ record }">
<a-button type="text" size="small" @click="handleEdit(record)">
编辑
</a-button>
<a-button type="text" size="small" @click="handleView(record)">
查看详情
</a-button>
<a-popconfirm
content="确定要删除这个机场吗？"
@ok="handleDelete(record)"
>
<a-button type="text" size="small" status="danger">
删除
</a-button>
</a-popconfirm>
</template>
</a-table>
</a-card>
</div>
<!-- 新增/编辑机场弹窗 -->
<a-modal
v-model:visible="modalVisible"
:title="modalTitle"
@ok="handleSave"
@cancel="handleCancel"
width="800px"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
layout="vertical"
>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="机场名称" field="name">
<a-input v-model="form.name" placeholder="请输入机场名称" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机场代码" field="code">
<a-input v-model="form.code" placeholder="请输入机场代码" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="所在省份" field="province">
<a-input v-model="form.province" placeholder="请输入所在省份" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="所在城市" field="city">
<a-input v-model="form.city" placeholder="请输入所在城市" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="经度" field="longitude">
<a-input-number
v-model="form.longitude"
placeholder="请输入经度"
:precision="6"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="纬度" field="latitude">
<a-input-number
v-model="form.latitude"
placeholder="请输入纬度"
:precision="6"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="海拔高度(米)" field="altitude">
<a-input-number
v-model="form.altitude"
placeholder="请输入海拔高度"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="状态" field="status">
<a-select v-model="form.status" placeholder="请选择状态">
<a-option value="1">运营中</a-option>
<a-option value="0">停运</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="备注" field="remark">
<a-textarea
v-model="form.remark"
placeholder="请输入备注信息"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconPlus, IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
// 搜索表单
const searchForm = reactive({
name: '',
status: ''
})
// 表格列配置
const columns = [
{
title: '机场名称',
dataIndex: 'name',
width: 150
},
{
title: '机场代码',
dataIndex: 'code',
width: 120
},
{
title: '所在地区',
dataIndex: 'location',
width: 200
},
{
title: '经纬度',
dataIndex: 'coordinates',
width: 180
},
{
title: '海拔高度(米)',
dataIndex: 'altitude',
width: 120
},
{
title: '状态',
dataIndex: 'status',
slotName: 'status',
width: 100
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 180
},
{
title: '操作',
slotName: 'actions',
width: 200,
fixed: 'right'
}
]
// 表格数据
const tableData = ref([
{
id: 1,
name: '北京首都国际机场',
code: 'PEK',
province: '北京市',
city: '北京市',
location: '北京市朝阳区',
longitude: 116.584556,
latitude: 40.080111,
coordinates: '116.584556, 40.080111',
altitude: 35,
status: '1',
remark: '中国最大的国际机场之一',
createTime: '2024-01-01 10:00:00'
},
{
id: 2,
name: '上海浦东国际机场',
code: 'PVG',
province: '上海市',
city: '上海市',
location: '上海市浦东新区',
longitude: 121.805214,
latitude: 31.143378,
coordinates: '121.805214, 31.143378',
altitude: 4,
status: '1',
remark: '华东地区重要的国际航空枢纽',
createTime: '2024-01-02 14:30:00'
},
{
id: 3,
name: '广州白云国际机场',
code: 'CAN',
province: '广东省',
city: '广州市',
location: '广州市白云区',
longitude: 113.298889,
latitude: 23.392436,
coordinates: '113.298889, 23.392436',
altitude: 15,
status: '1',
remark: '华南地区最大的民用机场',
createTime: '2024-01-03 09:15:00'
}
])
const loading = ref(false)
// 分页配置
const pagination = reactive({
current: 1,
pageSize: 10,
total: 3,
showTotal: true,
showPageSize: true
})
// 弹窗相关
const modalVisible = ref(false)
const modalTitle = ref('新增机场')
const formRef = ref()
// 表单数据
const form = reactive({
id: null,
name: '',
code: '',
province: '',
city: '',
longitude: null,
latitude: null,
altitude: null,
status: '1',
remark: ''
})
// 表单验证规则
const rules = {
name: [{ required: true, message: '请输入机场名称' }],
code: [{ required: true, message: '请输入机场代码' }],
province: [{ required: true, message: '请输入所在省份' }],
city: [{ required: true, message: '请输入所在城市' }],
longitude: [{ required: true, message: '请输入经度' }],
latitude: [{ required: true, message: '请输入纬度' }],
status: [{ required: true, message: '请选择状态' }]
}
// 搜索
const search = () => {
loading.value = true
// 这里应该调用实际的API
setTimeout(() => {
loading.value = false
Message.success('查询成功')
}, 1000)
}
// 重置搜索
const reset = () => {
searchForm.name = ''
searchForm.status = ''
search()
}
// 新增
const handleAdd = () => {
modalTitle.value = '新增机场'
modalVisible.value = true
resetForm()
}
// 编辑
const handleEdit = (record: any) => {
modalTitle.value = '编辑机场'
modalVisible.value = true
Object.assign(form, record)
}
// 查看详情
const handleView = (record: any) => {
Message.info(`查看机场详情: ${record.name}`)
// 这里可以跳转到详情页面或打开详情弹窗
}
// 删除
const handleDelete = (record: any) => {
Message.success(`删除机场: ${record.name}`)
// 这里应该调用删除API
}
// 保存
const handleSave = async () => {
const valid = await formRef.value?.validate()
if (valid) return
try {
loading.value = true
// 这里应该调用保存API
await new Promise(resolve => setTimeout(resolve, 1000))
Message.success(form.id ? '更新成功' : '新增成功')
modalVisible.value = false
search()
} catch (error) {
Message.error('操作失败')
} finally {
loading.value = false
}
}
// 取消
const handleCancel = () => {
modalVisible.value = false
resetForm()
}
// 重置表单
const resetForm = () => {
Object.keys(form).forEach(key => {
if (key === 'status') {
form[key] = '1'
} else {
form[key] = null
}
})
formRef.value?.clearValidate()
}
// 分页改变
const handlePageChange = (page: number) => {
pagination.current = page
search()
}
const handlePageSizeChange = (pageSize: number) => {
pagination.pageSize = pageSize
pagination.current = 1
search()
}
onMounted(() => {
search()
})
</script>
<style scoped lang="scss">
.airport-management {
.page-header {
margin-bottom: 16px;
}
.general-card {
border-radius: 8px;
}
}</style>

236
src/views/enterprise-dashboard/application-data/index.vue
View File

@ -323,138 +323,138 @@
onMounted(() => { onMounted(() => {
// 使用 nextTick 确保 DOM 已完全渲染 // 使用 nextTick 确保 DOM 已完全渲染
nextTick(() => { nextTick(() => {
// 初始化应用访问量趋势图表 // 初始化应用访问量趋势图表
if (appVisitChart.value) { if (appVisitChart.value) {
const visitChart = echarts.init(appVisitChart.value) const visitChart = echarts.init(appVisitChart.value)
visitChart.setOption({ visitChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['Web端', '移动端', '小程序'] data: ['Web端', '移动端', '小程序']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: 'Web端', name: 'Web端',
type: 'line', type: 'line',
data: [2500, 2800, 3200, 3100, 2950, 1800, 1200] data: [2500, 2800, 3200, 3100, 2950, 1800, 1200]
}, },
{ {
name: '移动端', name: '移动端',
type: 'line', type: 'line',
data: [3200, 3500, 3800, 3600, 3400, 2800, 2500] data: [3200, 3500, 3800, 3600, 3400, 2800, 2500]
}, },
{ {
name: '小程序', name: '小程序',
type: 'line', type: 'line',
data: [4500, 4800, 5200, 4900, 4700, 3900, 3500] data: [4500, 4800, 5200, 4900, 4700, 3900, 3500]
} }
] ]
}) })
} }
// 初始化应用使用时长分布图表 // 初始化应用使用时长分布图表
if (appTimeChart.value) { if (appTimeChart.value) {
const timeChart = echarts.init(appTimeChart.value) const timeChart = echarts.init(appTimeChart.value)
timeChart.setOption({ timeChart.setOption({
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'left' left: 'left'
}, },
series: [ series: [
{ {
name: '使用时长分布', name: '使用时长分布',
type: 'pie', type: 'pie',
radius: '70%', radius: '70%',
data: [ data: [
{ value: 35, name: 'Web端' }, { value: 35, name: 'Web端' },
{ value: 45, name: '移动端' }, { value: 45, name: '移动端' },
{ value: 20, name: '小程序' } { value: 20, name: '小程序' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
} }
] }
}) }
]
})
} }
// 初始化终端设备分布图表 // 初始化终端设备分布图表
if (deviceDistributionChart.value) { if (deviceDistributionChart.value) {
const deviceChart = echarts.init(deviceDistributionChart.value) const deviceChart = echarts.init(deviceDistributionChart.value)
deviceChart.setOption({ deviceChart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Windows PC', 'Mac', 'iOS', 'Android', '微信']
},
series: [
{
name: '访问量',
type: 'bar',
stack: 'total',
label: {
show: true
}, },
legend: {}, emphasis: {
grid: { focus: 'series'
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
xAxis: { data: [5200, 3800, 6500, 8200, 9500]
type: 'value' },
{
name: '用户数',
type: 'bar',
stack: 'total',
label: {
show: true
}, },
yAxis: { emphasis: {
type: 'category', focus: 'series'
data: ['Windows PC', 'Mac', 'iOS', 'Android', '微信']
}, },
series: [ data: [280, 220, 320, 380, 420]
{ }
name: '访问量', ]
type: 'bar', })
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [5200, 3800, 6500, 8200, 9500]
},
{
name: '用户数',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [280, 220, 320, 380, 420]
}
]
})
} }
// 监听窗口大小变化，调整图表大小 // 监听窗口大小变化，调整图表大小
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (appVisitChart.value) { if (appVisitChart.value) {
const visitChart = echarts.getInstanceByDom(appVisitChart.value) const visitChart = echarts.getInstanceByDom(appVisitChart.value)
visitChart?.resize() visitChart?.resize()

230
src/views/enterprise-dashboard/function-usage/index.vue
View File

@ -222,135 +222,135 @@
onMounted(() => { onMounted(() => {
// 使用 nextTick 确保 DOM 已完全渲染 // 使用 nextTick 确保 DOM 已完全渲染
nextTick(() => { nextTick(() => {
// 初始化功能模块使用频率图表 // 初始化功能模块使用频率图表
if (moduleUsageChart.value) { if (moduleUsageChart.value) {
const moduleChart = echarts.init(moduleUsageChart.value) const moduleChart = echarts.init(moduleUsageChart.value)
moduleChart.setOption({ moduleChart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
}, },
legend: { legend: {
data: ['使用次数', '使用人数'] data: ['使用次数', '使用人数']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'value' type: 'value'
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['组织架构', '资产管理', '产品与服务', '项目管理', '施工操作台', '聊天平台', '企业设置', '系统资源管理'] data: ['组织架构', '资产管理', '产品与服务', '项目管理', '施工操作台', '聊天平台', '企业设置', '系统资源管理']
}, },
series: [ series: [
{ {
name: '使用次数', name: '使用次数',
type: 'bar', type: 'bar',
data: [2110, 1988, 2106, 2470, 2460, 1420, 720, 650] data: [2110, 1988, 2106, 2470, 2460, 1420, 720, 650]
}, },
{ {
name: '使用人数', name: '使用人数',
type: 'bar', type: 'bar',
data: [320, 302, 315, 335, 340, 356, 120, 85] data: [320, 302, 315, 335, 340, 356, 120, 85]
} }
] ]
}) })
} }
// 初始化各部门功能使用分布图表 // 初始化各部门功能使用分布图表
if (departmentUsageChart.value) { if (departmentUsageChart.value) {
const departmentChart = echarts.init(departmentUsageChart.value) const departmentChart = echarts.init(departmentUsageChart.value)
departmentChart.setOption({ departmentChart.setOption({
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'left' left: 'left'
}, },
series: [ series: [
{ {
name: '部门使用分布', name: '部门使用分布',
type: 'pie', type: 'pie',
radius: '70%', radius: '70%',
data: [ data: [
{ value: 35, name: '技术部' }, { value: 35, name: '技术部' },
{ value: 25, name: '市场部' }, { value: 25, name: '市场部' },
{ value: 20, name: '销售部' }, { value: 20, name: '销售部' },
{ value: 10, name: '人事部' }, { value: 10, name: '人事部' },
{ value: 10, name: '财务部' } { value: 10, name: '财务部' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
} }
] }
}) }
]
})
} }
// 初始化功能使用时长占比图表 // 初始化功能使用时长占比图表
if (usageTimeChart.value) { if (usageTimeChart.value) {
const timeChart = echarts.init(usageTimeChart.value) const timeChart = echarts.init(usageTimeChart.value)
timeChart.setOption({ timeChart.setOption({
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '使用时长占比',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
}, },
legend: { label: {
orient: 'vertical', show: false,
left: 'left' position: 'center'
}, },
series: [ emphasis: {
{ label: {
name: '使用时长占比', show: true,
type: 'pie', fontSize: '16',
radius: ['40%', '70%'], fontWeight: 'bold'
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 20, name: '组织架构' },
{ value: 15, name: '资产管理' },
{ value: 15, name: '产品与服务' },
{ value: 20, name: '项目管理' },
{ value: 20, name: '施工操作台' },
{ value: 5, name: '聊天平台' },
{ value: 3, name: '企业设置' },
{ value: 2, name: '系统资源管理' }
]
} }
},
labelLine: {
show: false
},
data: [
{ value: 20, name: '组织架构' },
{ value: 15, name: '资产管理' },
{ value: 15, name: '产品与服务' },
{ value: 20, name: '项目管理' },
{ value: 20, name: '施工操作台' },
{ value: 5, name: '聊天平台' },
{ value: 3, name: '企业设置' },
{ value: 2, name: '系统资源管理' }
] ]
}) }
]
})
} }
// 监听窗口大小变化，调整图表大小 // 监听窗口大小变化，调整图表大小
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (moduleUsageChart.value) { if (moduleUsageChart.value) {
const moduleChart = echarts.getInstanceByDom(moduleUsageChart.value) const moduleChart = echarts.getInstanceByDom(moduleUsageChart.value)
moduleChart?.resize() moduleChart?.resize()

264
src/views/enterprise-dashboard/member-data/index.vue
View File

@ -322,150 +322,150 @@
onMounted(() => { onMounted(() => {
// 使用 nextTick 确保 DOM 已完全渲染 // 使用 nextTick 确保 DOM 已完全渲染
nextTick(() => { nextTick(() => {
// 初始化部门活跃度对比图表 // 初始化部门活跃度对比图表
if (departmentActivityChart.value) { if (departmentActivityChart.value) {
const departmentChart = echarts.init(departmentActivityChart.value) const departmentChart = echarts.init(departmentActivityChart.value)
departmentChart.setOption({ departmentChart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
}, },
legend: {}, legend: {},
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['技术部', '市场部', '销售部', '人事部', '财务部'] data: ['技术部', '市场部', '销售部', '人事部', '财务部']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: '活跃度', name: '活跃度',
type: 'bar', type: 'bar',
data: [92, 85, 88, 79, 82] data: [92, 85, 88, 79, 82]
}, },
{ {
name: '登录次数', name: '登录次数',
type: 'bar', type: 'bar',
data: [320, 280, 310, 240, 260] data: [320, 280, 310, 240, 260]
}, },
{ {
name: '操作次数', name: '操作次数',
type: 'bar', type: 'bar',
data: [2800, 2100, 2400, 1800, 2000] data: [2800, 2100, 2400, 1800, 2000]
} }
] ]
}) })
} }
// 初始化每日活跃用户数图表 // 初始化每日活跃用户数图表
if (dailyActiveUsersChart.value) { if (dailyActiveUsersChart.value) {
const dailyActiveChart = echarts.init(dailyActiveUsersChart.value) const dailyActiveChart = echarts.init(dailyActiveUsersChart.value)
dailyActiveChart.setOption({ dailyActiveChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
data: [120, 132, 145, 135, 128, 68, 42], data: [120, 132, 145, 135, 128, 68, 42],
type: 'line', type: 'line',
areaStyle: {} areaStyle: {}
} }
] ]
}) })
} }
// 初始化平均在线时长图表 // 初始化平均在线时长图表
if (onlineTimeChart.value) { if (onlineTimeChart.value) {
const onlineChart = echarts.init(onlineTimeChart.value) const onlineChart = echarts.init(onlineTimeChart.value)
onlineChart.setOption({ onlineChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['技术部', '市场部', '销售部', '人事部', '财务部'] data: ['技术部', '市场部', '销售部', '人事部', '财务部']
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value} 小时' formatter: '{value} 小时'
} }
}, },
series: [ series: [
{ {
name: '平均在线时长', name: '平均在线时长',
type: 'bar', type: 'bar',
data: [7.5, 6.8, 7.2, 6.5, 6.9] data: [7.5, 6.8, 7.2, 6.5, 6.9]
} }
] ]
}) })
} }
// 初始化考勤趋势图表 // 初始化考勤趋势图表
if (attendanceTrendChart.value) { if (attendanceTrendChart.value) {
const attendanceChart = echarts.init(attendanceTrendChart.value) const attendanceChart = echarts.init(attendanceTrendChart.value)
attendanceChart.setOption({ attendanceChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['出勤率', '迟到率', '早退率'] data: ['出勤率', '迟到率', '早退率']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'] data: ['1月', '2月', '3月', '4月', '5月', '6月']
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value}%' formatter: '{value}%'
} }
}, },
series: [ series: [
{ {
name: '出勤率', name: '出勤率',
type: 'line', type: 'line',
data: [96.2, 97.1, 96.8, 97.5, 98.2, 97.8] data: [96.2, 97.1, 96.8, 97.5, 98.2, 97.8]
}, },
{ {
name: '迟到率', name: '迟到率',
type: 'line', type: 'line',
data: [2.8, 2.2, 2.5, 1.8, 1.2, 1.5] data: [2.8, 2.2, 2.5, 1.8, 1.2, 1.5]
}, },
{ {
name: '早退率', name: '早退率',
type: 'line', type: 'line',
data: [1.0, 0.7, 0.7, 0.7, 0.6, 0.7] data: [1.0, 0.7, 0.7, 0.7, 0.6, 0.7]
} }
] ]
}) })
} }
// 监听窗口大小变化，调整图表大小 // 监听窗口大小变化，调整图表大小
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (departmentActivityChart.value) { if (departmentActivityChart.value) {
const departmentChart = echarts.getInstanceByDom(departmentActivityChart.value) const departmentChart = echarts.getInstanceByDom(departmentActivityChart.value)
departmentChart?.resize() departmentChart?.resize()

244
src/views/enterprise-dashboard/overview/index.vue
View File

@ -105,139 +105,139 @@
onMounted(() => { onMounted(() => {
// 使用 nextTick 确保 DOM 已完全渲染 // 使用 nextTick 确保 DOM 已完全渲染
nextTick(() => { nextTick(() => {
// 初始化项目进度统计图表 // 初始化项目进度统计图表
if (projectProgressChart.value) { if (projectProgressChart.value) {
const projectChart = echarts.init(projectProgressChart.value) const projectChart = echarts.init(projectProgressChart.value)
projectChart.setOption({ projectChart.setOption({
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'left' left: 'left'
}, },
series: [ series: [
{ {
name: '项目状态', name: '项目状态',
type: 'pie', type: 'pie',
radius: '70%', radius: '70%',
data: [ data: [
{ value: 48, name: '进行中' }, { value: 48, name: '进行中' },
{ value: 65, name: '已完成' }, { value: 65, name: '已完成' },
{ value: 12, name: '已暂停' }, { value: 12, name: '已暂停' },
{ value: 3, name: '已取消' } { value: 3, name: '已取消' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
} }
] }
}) }
]
})
} }
// 初始化资源使用情况图表 // 初始化资源使用情况图表
if (resourceUsageChart.value) { if (resourceUsageChart.value) {
const resourceChart = echarts.init(resourceUsageChart.value) const resourceChart = echarts.init(resourceUsageChart.value)
resourceChart.setOption({ resourceChart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['服务器', '存储空间', '带宽', '设备使用率', '人力资源']
},
series: [
{
name: '已使用',
type: 'bar',
stack: 'total',
label: {
show: true
}, },
legend: {}, emphasis: {
grid: { focus: 'series'
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
xAxis: { data: [65, 72, 58, 80, 75]
type: 'value' },
{
name: '剩余',
type: 'bar',
stack: 'total',
label: {
show: true
}, },
yAxis: { emphasis: {
type: 'category', focus: 'series'
data: ['服务器', '存储空间', '带宽', '设备使用率', '人力资源']
}, },
series: [ data: [35, 28, 42, 20, 25]
{ }
name: '已使用', ]
type: 'bar', })
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [65, 72, 58, 80, 75]
},
{
name: '剩余',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [35, 28, 42, 20, 25]
}
]
})
} }
// 初始化业务趋势图表 // 初始化业务趋势图表
if (businessTrendChart.value) { if (businessTrendChart.value) {
const businessChart = echarts.init(businessTrendChart.value) const businessChart = echarts.init(businessTrendChart.value)
businessChart.setOption({ businessChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['项目数量', '营业收入', '新增客户'] data: ['项目数量', '营业收入', '新增客户']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'] data: ['1月', '2月', '3月', '4月', '5月', '6月']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: '项目数量', name: '项目数量',
type: 'line', type: 'line',
data: [10, 12, 15, 18, 22, 24] data: [10, 12, 15, 18, 22, 24]
}, },
{ {
name: '营业收入', name: '营业收入',
type: 'line', type: 'line',
data: [120, 132, 145, 160, 178, 190] data: [120, 132, 145, 160, 178, 190]
}, },
{ {
name: '新增客户', name: '新增客户',
type: 'line', type: 'line',
data: [5, 7, 8, 10, 12, 15] data: [5, 7, 8, 10, 12, 15]
} }
] ]
}) })
} }
// 监听窗口大小变化，调整图表大小 // 监听窗口大小变化，调整图表大小
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (projectProgressChart.value) { if (projectProgressChart.value) {
const projectChart = echarts.getInstanceByDom(projectProgressChart.value) const projectChart = echarts.getInstanceByDom(projectProgressChart.value)
projectChart?.resize() projectChart?.resize()