383 lines
15 KiB
HTML
383 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>资产管理系统 - 首页</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.dashboard-container {
|
|
padding: 20px;
|
|
}
|
|
.welcome-card {
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.welcome-text {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.welcome-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
z-index: 1;
|
|
opacity: 0.1;
|
|
}
|
|
.summary-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 -10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.summary-card {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
min-width: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.card-title {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-bottom: 5px;
|
|
}
|
|
.card-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
.trends-container {
|
|
display: flex;
|
|
margin: 0 -10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.trend-card {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
.trend-title {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.trend-chart {
|
|
height: 300px;
|
|
}
|
|
.todo-list {
|
|
margin-top: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
}
|
|
.todo-title {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.summary-cards {
|
|
flex-direction: column;
|
|
}
|
|
.summary-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
.trends-container {
|
|
flex-direction: column;
|
|
}
|
|
.trend-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="dashboard-container">
|
|
<!-- 欢迎卡片 -->
|
|
<el-card class="welcome-card">
|
|
<div class="welcome-text">
|
|
<h2>欢迎使用资产管理系统</h2>
|
|
<p>当前时间: {{ currentTime }}</p>
|
|
<p>今日是工作日，祝您工作愉快！</p>
|
|
</div>
|
|
<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="welcome-bg" alt="Welcome">
|
|
</el-card>
|
|
|
|
<!-- 概览卡片 -->
|
|
<div class="summary-cards">
|
|
<div class="summary-card" style="color: #409EFF">
|
|
<i class="el-icon-s-management card-icon"></i>
|
|
<div class="card-title">资产总数</div>
|
|
<div class="card-value">{{ assetCount }}</div>
|
|
</div>
|
|
<div class="summary-card" style="color: #67C23A">
|
|
<i class="el-icon-s-goods card-icon"></i>
|
|
<div class="card-title">在用资产</div>
|
|
<div class="card-value">{{ inUseCount }}</div>
|
|
</div>
|
|
<div class="summary-card" style="color: #E6A23C">
|
|
<i class="el-icon-s-finance card-icon"></i>
|
|
<div class="card-title">资产总值</div>
|
|
<div class="card-value">{{ totalValue }}</div>
|
|
</div>
|
|
<div class="summary-card" style="color: #F56C6C">
|
|
<i class="el-icon-s-claim card-icon"></i>
|
|
<div class="card-title">维修中</div>
|
|
<div class="card-value">{{ maintenanceCount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 趋势图表 -->
|
|
<div class="trends-container">
|
|
<div class="trend-card">
|
|
<h3 class="trend-title">资产分类分布</h3>
|
|
<div id="pieChart" class="trend-chart"></div>
|
|
</div>
|
|
<div class="trend-card">
|
|
<h3 class="trend-title">近12个月资产新增趋势</h3>
|
|
<div id="lineChart" class="trend-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待办事项 -->
|
|
<div class="todo-list">
|
|
<h3 class="todo-title">待办事项</h3>
|
|
<el-table :data="todoList" style="width: 100%">
|
|
<el-table-column prop="title" label="事项内容" min-width="300"></el-table-column>
|
|
<el-table-column prop="type" label="类型" width="120">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="getTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="deadline" label="截止日期" width="120"></el-table-column>
|
|
<el-table-column prop="status" label="状态" width="120">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.status === '未完成' ? 'danger' : 'success'">{{ scope.row.status }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="120" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="handleComplete(scope.row)">完成</el-button>
|
|
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
currentTime: new Date().toLocaleString(),
|
|
assetCount: 1258,
|
|
inUseCount: 1156,
|
|
totalValue: '¥ 3,245,600',
|
|
maintenanceCount: 23,
|
|
todoList: [
|
|
{ id: 1, title: '资产盘点 - 研发部门', type: '盘点', deadline: '2023-06-15', status: '未完成' },
|
|
{ id: 2, title: '打印机维护到期提醒', type: '维护', deadline: '2023-06-18', status: '未完成' },
|
|
{ id: 3, title: '资产报废处理 - 3台旧电脑', type: '报废', deadline: '2023-06-20', status: '未完成' },
|
|
{ id: 4, title: '新员工办公设备准备', type: '领用', deadline: '2023-06-22', status: '未完成' },
|
|
{ id: 5, title: '财务部门资产转移', type: '转移', deadline: '2023-06-25', status: '未完成' }
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
// 更新时间
|
|
setInterval(() => {
|
|
this.currentTime = new Date().toLocaleString();
|
|
}, 1000);
|
|
|
|
// 初始化图表
|
|
this.initPieChart();
|
|
this.initLineChart();
|
|
},
|
|
methods: {
|
|
// 获取标签类型
|
|
getTagType(type) {
|
|
const typeMap = {
|
|
'盘点': 'primary',
|
|
'维护': 'warning',
|
|
'报废': 'danger',
|
|
'领用': 'success',
|
|
'转移': 'info'
|
|
};
|
|
return typeMap[type] || 'info';
|
|
},
|
|
|
|
// 完成待办事项
|
|
handleComplete(row) {
|
|
this.$confirm(`确认完成"${row.title}"吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
// 找到对应的待办事项并更新状态
|
|
const index = this.todoList.findIndex(item => item.id === row.id);
|
|
if (index !== -1) {
|
|
this.todoList[index].status = '已完成';
|
|
this.$message.success('操作成功');
|
|
}
|
|
}).catch(() => {});
|
|
},
|
|
|
|
// 查看待办事项
|
|
handleView(row) {
|
|
this.$message.info(`查看详情功能开发中...`);
|
|
},
|
|
|
|
// 初始化饼图
|
|
initPieChart() {
|
|
const chartDom = document.getElementById('pieChart');
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['电子设备', '办公家具', '运输设备', '生产设备', '其他资产']
|
|
},
|
|
series: [
|
|
{
|
|
name: '资产分类',
|
|
type: 'pie',
|
|
radius: '65%',
|
|
center: ['60%', '50%'],
|
|
data: [
|
|
{ value: 540, name: '电子设备' },
|
|
{ value: 320, name: '办公家具' },
|
|
{ value: 80, name: '运输设备' },
|
|
{ value: 200, name: '生产设备' },
|
|
{ value: 118, name: '其他资产' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
// 响应窗口大小变化
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
|
|
// 初始化折线图
|
|
initLineChart() {
|
|
const chartDom = document.getElementById('lineChart');
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['资产新增', '资产报废']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '资产新增',
|
|
type: 'line',
|
|
data: [25, 32, 40, 36, 38, 45, 50, 20, 15, 28, 42, 35],
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#409EFF',
|
|
width: 3
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
|
|
{ offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
name: '资产报废',
|
|
type: 'line',
|
|
data: [5, 8, 10, 12, 7, 6, 9, 8, 5, 4, 6, 10],
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#F56C6C',
|
|
width: 3
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(245, 108, 108, 0.5)' },
|
|
{ offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
|
|
])
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
// 响应窗口大小变化
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |