|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="dashboard-page">
|
|
<div class="dashboard-page">
|
|
|
<el-row :gutter="20" class="mb-20 card-row">
|
|
<el-row :gutter="20" class="mb-20 card-row">
|
|
|
- <el-col :span="14">
|
|
|
|
|
|
|
+ <el-col :span="13">
|
|
|
<el-card shadow="hover">
|
|
<el-card shadow="hover">
|
|
|
<div class="card-header">
|
|
<div class="card-header">
|
|
|
<div class="left-icon">
|
|
<div class="left-icon">
|
|
@@ -25,10 +25,13 @@
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div ref="chartRef" style="width: 100%; height: 300px"></div>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ ref="chartRef"
|
|
|
|
|
+ style="width: 100%; height: 400px; margin-top: 20px"
|
|
|
|
|
+ ></div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="10">
|
|
|
|
|
|
|
+ <el-col :span="11">
|
|
|
<el-card shadow="hover">
|
|
<el-card shadow="hover">
|
|
|
<div class="card-header">
|
|
<div class="card-header">
|
|
|
<div class="left-icon">
|
|
<div class="left-icon">
|
|
@@ -43,12 +46,13 @@
|
|
|
<li v-for="(item, idx) in newsList" :key="idx" class="news-item">
|
|
<li v-for="(item, idx) in newsList" :key="idx" class="news-item">
|
|
|
<div class="news-content">
|
|
<div class="news-content">
|
|
|
<div class="news-title">
|
|
<div class="news-title">
|
|
|
- <i class="el-icon-arrow-right"></i>
|
|
|
|
|
|
|
+ <i class="icon-dot"></i>
|
|
|
{{ item.content }}
|
|
{{ item.content }}
|
|
|
</div>
|
|
</div>
|
|
|
<div class="news-meta">
|
|
<div class="news-meta">
|
|
|
<div class="left-icon">
|
|
<div class="left-icon">
|
|
|
<img
|
|
<img
|
|
|
|
|
+ style="width: 14px; height: 14px; vertical-align: middle"
|
|
|
src="@/assets/index_images/index-icon3@2x.png"
|
|
src="@/assets/index_images/index-icon3@2x.png"
|
|
|
alt="管理员"
|
|
alt="管理员"
|
|
|
/>
|
|
/>
|
|
@@ -56,6 +60,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="left-icon">
|
|
<div class="left-icon">
|
|
|
<img
|
|
<img
|
|
|
|
|
+ style="width: 14px; height: 14px; vertical-align: middle"
|
|
|
src="@/assets/index_images/index-icon4@2x.png"
|
|
src="@/assets/index_images/index-icon4@2x.png"
|
|
|
alt="时间"
|
|
alt="时间"
|
|
|
/>
|
|
/>
|
|
@@ -89,7 +94,12 @@
|
|
|
></el-option>
|
|
></el-option>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-table :data="todoList" style="width: 100%" :stripe="false">
|
|
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :data="todoList"
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ :stripe="false"
|
|
|
|
|
+ class="no-zebra"
|
|
|
|
|
+ >
|
|
|
<el-table-column label="预警" width="60">
|
|
<el-table-column label="预警" width="60">
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
<el-tag v-if="scope.row.warning" type="warning">预警</el-tag>
|
|
<el-tag v-if="scope.row.warning" type="warning">预警</el-tag>
|
|
@@ -171,7 +181,7 @@
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-row>
|
|
|
|
|
|
|
+ <el-row class="mt20">
|
|
|
<el-col :span="13">
|
|
<el-col :span="13">
|
|
|
<div class="calendar-container">
|
|
<div class="calendar-container">
|
|
|
<div class="calendar-header">
|
|
<div class="calendar-header">
|
|
@@ -256,59 +266,57 @@
|
|
|
</div>
|
|
</div>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
<el-col :span="10">
|
|
|
- <ul class="memo-list">
|
|
|
|
|
|
|
+ <ul class="news-list card-content">
|
|
|
<li
|
|
<li
|
|
|
v-for="(item, idx) in memoList"
|
|
v-for="(item, idx) in memoList"
|
|
|
:key="idx"
|
|
:key="idx"
|
|
|
- class="memo-item"
|
|
|
|
|
|
|
+ class="news-item mb10"
|
|
|
>
|
|
>
|
|
|
- <div class="left-icon">
|
|
|
|
|
- <img
|
|
|
|
|
- v-if="item.type === 'warning'"
|
|
|
|
|
- src="@/assets/index_images/index-icon6-light@2x.png"
|
|
|
|
|
- alt=""
|
|
|
|
|
- style="width: 15px; height: 15px"
|
|
|
|
|
- />
|
|
|
|
|
- <img
|
|
|
|
|
- v-else
|
|
|
|
|
- src="@/assets/index_images/index-icon6@2x.png"
|
|
|
|
|
- alt=""
|
|
|
|
|
- style="width: 15px; height: 15px"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="memo-content">
|
|
|
|
|
- <h4
|
|
|
|
|
- style="
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- margin: 0 0 8px 0;
|
|
|
|
|
- "
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.projectName }}
|
|
|
|
|
- </h4>
|
|
|
|
|
- <p class="memo-meta">
|
|
|
|
|
- <span class="memo-meta-title">
|
|
|
|
|
- {{ item.title }}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span class="memo-meta-date">
|
|
|
|
|
|
|
+ <div class="news-content">
|
|
|
|
|
+ <div class="news-title mb10">
|
|
|
|
|
+ <img
|
|
|
|
|
+ v-if="item.type === 'warning'"
|
|
|
|
|
+ src="@/assets/index_images/index-icon6-light@2x.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ style="width: 15px; height: 15px"
|
|
|
|
|
+ />
|
|
|
|
|
+ <img
|
|
|
|
|
+ v-else
|
|
|
|
|
+ src="@/assets/index_images/index-icon6@2x.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ style="width: 15px; height: 15px"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">{{ item.projectName }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="news-meta mb10">
|
|
|
|
|
+ <div class="left-icon w40">
|
|
|
|
|
+ <img
|
|
|
|
|
+ style="
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ "
|
|
|
|
|
+ src="@/assets/index_images/index-icon4@2x.png"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="left-icon">
|
|
|
<img
|
|
<img
|
|
|
style="
|
|
style="
|
|
|
width: 14px;
|
|
width: 14px;
|
|
|
height: 14px;
|
|
height: 14px;
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
- margin-right: 4px;
|
|
|
|
|
"
|
|
"
|
|
|
src="@/assets/index_images/index-icon4@2x.png"
|
|
src="@/assets/index_images/index-icon4@2x.png"
|
|
|
alt="时间"
|
|
alt="时间"
|
|
|
/>
|
|
/>
|
|
|
- {{ item.memoDate }}
|
|
|
|
|
- </span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <p class="memo-content-text">
|
|
|
|
|
|
|
+ <span>{{ item.memoDate }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="news-meta">
|
|
|
<i class="el-icon-document"></i>
|
|
<i class="el-icon-document"></i>
|
|
|
- {{ item.content }}
|
|
|
|
|
- </p>
|
|
|
|
|
|
|
+ <span class="content-text">{{ item.content }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
@@ -405,7 +413,7 @@
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.$el.querySelector('div.el-calendar__header').remove()
|
|
this.$el.querySelector('div.el-calendar__header').remove()
|
|
|
this.initChart()
|
|
this.initChart()
|
|
|
- this.initCalendarData()
|
|
|
|
|
|
|
+ this.initCalendarData(5)
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
// 判断是否为周末
|
|
// 判断是否为周末
|
|
@@ -432,12 +440,17 @@
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
legend: {
|
|
legend: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ itemWidth: 20,
|
|
|
|
|
+ itemHeight: 8,
|
|
|
|
|
+ itemGap: 10,
|
|
|
data: ['已办', '在办'],
|
|
data: ['已办', '在办'],
|
|
|
},
|
|
},
|
|
|
grid: {
|
|
grid: {
|
|
|
|
|
+ top: '20%',
|
|
|
left: '3%',
|
|
left: '3%',
|
|
|
right: '4%',
|
|
right: '4%',
|
|
|
- bottom: '15%', // 增加底部空间以容纳滚动条和旋转的标签
|
|
|
|
|
|
|
+ bottom: '2%', // 增加底部空间以容纳滚动条和旋转的标签
|
|
|
containLabel: true,
|
|
containLabel: true,
|
|
|
},
|
|
},
|
|
|
xAxis: {
|
|
xAxis: {
|
|
@@ -488,8 +501,8 @@
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
loadMoreNews() {
|
|
loadMoreNews() {
|
|
|
- // // 跳转备忘录页面
|
|
|
|
|
- // this.$router.push('/costAudit/projectInfo/memoManage')
|
|
|
|
|
|
|
+ // 跳转通知公告页面
|
|
|
|
|
+ this.$router.push('/personal/notice')
|
|
|
},
|
|
},
|
|
|
handleOp(type, row) {
|
|
handleOp(type, row) {
|
|
|
this.$message.info(`执行【${type}】操作:${row.task}`)
|
|
this.$message.info(`执行【${type}】操作:${row.task}`)
|
|
@@ -510,13 +523,17 @@
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
@import '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManage.scss';
|
|
@import '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManage.scss';
|
|
|
- .dashboard-page {
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- }
|
|
|
|
|
.mb-20 {
|
|
.mb-20 {
|
|
|
/* border: 1px solid red; */
|
|
/* border: 1px solid red; */
|
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
+ .icon-dot {
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ background-color: #999999;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
/* 确保同一行的卡片高度一致 */
|
|
/* 确保同一行的卡片高度一致 */
|
|
|
.card-row {
|
|
.card-row {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -556,11 +573,14 @@
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
}
|
|
}
|
|
|
.news-list {
|
|
.news-list {
|
|
|
|
|
+ width: 100%;
|
|
|
}
|
|
}
|
|
|
.card-content {
|
|
.card-content {
|
|
|
|
|
+ width: 100%;
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
}
|
|
}
|
|
|
.news-item {
|
|
.news-item {
|
|
|
|
|
+ width: 100%;
|
|
|
padding: 12px 0;
|
|
padding: 12px 0;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -570,14 +590,19 @@
|
|
|
border-bottom: none;
|
|
border-bottom: none;
|
|
|
}
|
|
}
|
|
|
.news-content {
|
|
.news-content {
|
|
|
|
|
+ width: 100%;
|
|
|
line-height: 1.6;
|
|
line-height: 1.6;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
}
|
|
}
|
|
|
.news-title {
|
|
.news-title {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
|
|
|
|
+ align-items: flex-center;
|
|
|
margin-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
|
+ width: 95%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
.news-title i {
|
|
.news-title i {
|
|
|
color: #f56c6c;
|
|
color: #f56c6c;
|
|
@@ -587,6 +612,7 @@
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
}
|
|
}
|
|
|
.news-meta {
|
|
.news-meta {
|
|
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
margin-left: 22px;
|
|
margin-left: 22px;
|
|
@@ -596,8 +622,8 @@
|
|
|
}
|
|
}
|
|
|
.news-meta .left-icon span {
|
|
.news-meta .left-icon span {
|
|
|
margin-left: 4px;
|
|
margin-left: 4px;
|
|
|
- color: #909399;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
|
|
+ color: #61657e;
|
|
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
}
|
|
|
.calendar-day {
|
|
.calendar-day {
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -618,82 +644,34 @@
|
|
|
background-color: #67c23a;
|
|
background-color: #67c23a;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
}
|
|
}
|
|
|
- .memo-list {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- list-style: none;
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- }
|
|
|
|
|
- .memo-item {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-start;
|
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
- }
|
|
|
|
|
- .memo-item:last-child {
|
|
|
|
|
- margin-bottom: 0;
|
|
|
|
|
- }
|
|
|
|
|
- .memo-item .left-icon {
|
|
|
|
|
|
|
+ .left-icon {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
|
|
- margin-right: 12px;
|
|
|
|
|
- padding-top: 2px;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 20px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .memo-item .left-icon img {
|
|
|
|
|
- width: 15px;
|
|
|
|
|
- height: 15px;
|
|
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
}
|
|
|
- .memo-content {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- flex: 1;
|
|
|
|
|
|
|
+ /* 彻底移除表格斑马纹效果 */
|
|
|
|
|
+ .no-zebra ::v-deep .el-table__row:nth-child(even) {
|
|
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
}
|
|
|
- .memo-content h4 {
|
|
|
|
|
- margin: 0 0 8px 0;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: bolder;
|
|
|
|
|
- color: #303133;
|
|
|
|
|
|
|
+ .no-zebra ::v-deep .el-table__body tr:hover > td {
|
|
|
|
|
+ background-color: #f5f7fa !important;
|
|
|
}
|
|
}
|
|
|
- .memo-meta {
|
|
|
|
|
- width: 95%;
|
|
|
|
|
- // display: flex;
|
|
|
|
|
- // align-items: center;
|
|
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
|
|
+ .w40 {
|
|
|
|
|
+ width: 40%;
|
|
|
}
|
|
}
|
|
|
- .memo-meta-title {
|
|
|
|
|
|
|
+ .content-text {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
- width: 40%;
|
|
|
|
|
|
|
+ width: 95%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
|
|
+ color: #61657e;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- color: #606266;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- .memo-meta-date {
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- color: #909399;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- }
|
|
|
|
|
- .memo-content-text {
|
|
|
|
|
- width: 98%;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #606266;
|
|
|
|
|
- line-height: 1.6;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- padding-left: 0;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- }
|
|
|
|
|
- .left-icon {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- img {
|
|
|
|
|
- width: 20px;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
h3 {
|
|
h3 {
|
|
|
margin: 0;
|
|
margin: 0;
|