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

Compare commits

base: wuxueyu:253b6ffcca8e806c02889257dfec6941bf7fc0a5
Branches Tags
wuxueyu:main
wuxueyu:devlopment
wuxueyu:hcc
wuxueyu:jgqweb
wuxueyu:ljy/master
wuxueyu:ccd
wuxueyu:hdc
wuxueyu:wn
wuxueyu:master
..
compare: wuxueyu:30eca5da60c318c95bc78081abcbd9977ef34048
Branches Tags
wuxueyu:devlopment
wuxueyu:main
wuxueyu:hcc
wuxueyu:jgqweb
wuxueyu:ljy/master
wuxueyu:ccd
wuxueyu:hdc
wuxueyu:wn
wuxueyu:master

2 Commits
253b6ffcca ... 30eca5da60

Author SHA1 Message Date
wxy 30eca5da60 Merge branch 'main' of http://pms.dtyx.net:3000/wuxueyu/Industrial-image-management-system---web 2025-07-21 10:52:21 +08:00
wxy a6b7b343a9 侧边栏结构修改 2025-07-21 10:50:02 +08:00
8 changed files with 911 additions and 824 deletions
Show Stats Expand all files Collapse all files

26
src/apis/health-record/index.ts
View File

@ -40,7 +40,7 @@ export function createHealthRecord(data: HealthRecord) {
return request({ return request({
url: '/health-record', url: '/health-record',
method: 'post', method: 'post',
data, data
}) })
} }
@ -49,7 +49,7 @@ export function getHealthRecordList(params: HealthRecordListParams) {
return request<HealthRecordListResponse>({ return request<HealthRecordListResponse>({
url: '/health-record/list', url: '/health-record/list',
method: 'get', method: 'get',
params, params
}) })
} }
@ -57,7 +57,7 @@ export function getHealthRecordList(params: HealthRecordListParams) {
export function getHealthRecordDetail(id: string) { export function getHealthRecordDetail(id: string) {
return request<HealthRecord>({ return request<HealthRecord>({
url: `/health-record/detail/${id}`, url: `/health-record/detail/${id}`,
method: 'get', method: 'get'
}) })
} }
@ -66,7 +66,7 @@ export function updateHealthRecord(id: string, data: HealthRecord) {
return request({ return request({
url: `/health-record/${id}`, url: `/health-record/${id}`,
method: 'put', method: 'put',
data, data
}) })
} }
@ -74,7 +74,7 @@ export function updateHealthRecord(id: string, data: HealthRecord) {
export function deleteHealthRecord(id: string) { export function deleteHealthRecord(id: string) {
return request({ return request({
url: `/health-record/${id}`, url: `/health-record/${id}`,
method: 'delete', method: 'delete'
}) })
} }
@ -83,14 +83,14 @@ export function uploadHealthReport(file: File, recordId: string) {
const formData = new FormData() const formData = new FormData()
formData.append('file', file) formData.append('file', file)
formData.append('recordId', recordId) formData.append('recordId', recordId)
return request({ return request({
url: '/health-record/upload-report', url: '/health-record/upload-report',
method: 'post', method: 'post',
data: formData, data: formData,
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data'
}, }
}) })
} }
@ -99,7 +99,7 @@ export function downloadHealthReport(fileId: string) {
return request({ return request({
url: `/health-record/download-report/${fileId}`, url: `/health-record/download-report/${fileId}`,
method: 'get', method: 'get',
responseType: 'blob', responseType: 'blob'
}) })
} }
@ -107,7 +107,7 @@ export function downloadHealthReport(fileId: string) {
export function getEmployeeHealthHistory(employeeId: string) { export function getEmployeeHealthHistory(employeeId: string) {
return request<HealthRecord[]>({ return request<HealthRecord[]>({
url: `/health-record/employee/${employeeId}`, url: `/health-record/employee/${employeeId}`,
method: 'get', method: 'get'
}) })
} }
@ -117,7 +117,7 @@ export function exportHealthRecords(params: HealthRecordListParams) {
url: '/health-record/export', url: '/health-record/export',
method: 'get', method: 'get',
params, params,
responseType: 'blob', responseType: 'blob'
}) })
} }
@ -131,6 +131,6 @@ export function scheduleHealthCheck(data: {
return request({ return request({
url: '/health-record/schedule', url: '/health-record/schedule',
method: 'post', method: 'post',
data, data
}) })
} }

3
src/apis/index.ts
View File

@ -9,7 +9,6 @@ export * from './project'
export * from './project/task' export * from './project/task'
export * from './attach-info' export * from './attach-info'
export * from './model-config' export * from './model-config'
export * from './performance'
// 保险相关模块 // 保险相关模块
export * as InsuranceAPI from './insurance' export * as InsuranceAPI from './insurance'
export * as InsuranceCompanyAPI from './insurance-company' export * as InsuranceCompanyAPI from './insurance-company'
@ -28,5 +27,3 @@ export * from './schedule/type'
export * from './project/type' export * from './project/type'
export * from './attach-info/type' export * from './attach-info/type'
export * from './model-config/type' export * from './model-config/type'
export * from './performance/type'
export * from './salary'

2
src/apis/system/user-new.ts
View File

@ -36,4 +36,4 @@ export function updateUserNew(userId: string, data: T.UserNewUpdateReq) {
/** @desc 删除用户信息 */ /** @desc 删除用户信息 */
export function deleteUserNew(userId: string) { export function deleteUserNew(userId: string) {
return http.del(`${BASE_URL}/${userId}`) return http.del(`${BASE_URL}/${userId}`)
} }

730
src/router/route.ts
View File

File diff suppressed because it is too large Load Diff

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()