|
|
@@ -164,6 +164,7 @@
|
|
|
type="primary"
|
|
|
style="margin-left: 10px"
|
|
|
size="small"
|
|
|
+ icon="el-icon-search"
|
|
|
@click="searchMemo"
|
|
|
>
|
|
|
查询
|
|
|
@@ -181,17 +182,7 @@
|
|
|
>
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
</el-button>
|
|
|
- <span class="month-text">
|
|
|
- {{ getCustomMonthText(currentDate) }}
|
|
|
- <span class="lunar-info">
|
|
|
- 农历{{
|
|
|
- getChineseCalendar(
|
|
|
- currentDate.getFullYear(),
|
|
|
- currentDate.getMonth() + 1
|
|
|
- )
|
|
|
- }}年【{{ getChineseZodiac(currentDate.getFullYear()) }}】
|
|
|
- </span>
|
|
|
- </span>
|
|
|
+ <span class="month-text">{{ setCalendarTitle() }}年</span>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
class="calendar-btn"
|
|
|
@@ -200,46 +191,71 @@
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- <el-calendar ref="calendar" v-model="currentDate">
|
|
|
+ <el-calendar
|
|
|
+ ref="calendar"
|
|
|
+ v-model="selectedDate"
|
|
|
+ :first-day-of-week="0"
|
|
|
+ >
|
|
|
<!-- 自定义日期单元格 -->
|
|
|
- <template slot="dateCell" slot-scope="{ data }">
|
|
|
- <div
|
|
|
- class="calendar-day"
|
|
|
- :class="{
|
|
|
- 'has-event': hasEventOnDate(data.day),
|
|
|
- selected: data.date === currentDate,
|
|
|
- weekend: isWeekend(new Date(data.date)),
|
|
|
- }"
|
|
|
- @click="handleDateClick(data)"
|
|
|
- >
|
|
|
- <div class="date-number">
|
|
|
- {{ data.day.split('-').slice(2).join('-') }}
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="lunar-date">
|
|
|
- {{ getLunarDate(data.day) }}
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-if="hasEventOnDate(data.day)"
|
|
|
- class="event-dot"
|
|
|
- ></div>
|
|
|
-
|
|
|
+ <template slot="dateCell" slot-scope="{ date, data }">
|
|
|
+ <el-tooltip placement="top">
|
|
|
<div
|
|
|
- v-if="hasEventOnDate(data.day)"
|
|
|
- v-show="showTooltip && selectedDate === data.day"
|
|
|
- class="tooltip"
|
|
|
+ class="calendar-cell"
|
|
|
+ @click="handleDateClick(date, data)"
|
|
|
>
|
|
|
- <div class="tooltip-content">
|
|
|
- {{ getEventDescription(data.day) }}
|
|
|
+ <!-- 公历日期 -->
|
|
|
+ <div class="calendar-date-number">
|
|
|
+ {{ data.day.split('-').slice(-1)[0] }}
|
|
|
+ </div>
|
|
|
+ <!-- 农历日期和节日 -->
|
|
|
+ <div class="calendar-lunar-info">
|
|
|
+ <!-- 公历节日 -->
|
|
|
+ {{ getLunarInfo(date).IDayCn }}
|
|
|
+ <span class="calendar-festival">
|
|
|
+ {{
|
|
|
+ getLunarInfo(date).festival
|
|
|
+ ? getLunarInfo(date).festival + ' '
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ {{
|
|
|
+ getLunarInfo(date).lunarFestival
|
|
|
+ ? getLunarInfo(date).lunarFestival + ' '
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ {{
|
|
|
+ getLunarInfo(date).Term
|
|
|
+ ? getLunarInfo(date).Term
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ v-if="getTasksByDate(date).length > 0"
|
|
|
+ class="task-indicator"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <div slot="content">
|
|
|
+ <template v-if="getTasksByDate(date).length > 0">
|
|
|
+ <div
|
|
|
+ v-for="(task, index) in getTasksByDate(date)"
|
|
|
+ :key="index"
|
|
|
+ class="task-item"
|
|
|
+ >
|
|
|
+ <div class="task-title">
|
|
|
+ {{ index + 1 }}.{{ task.projectName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="no-tasks">暂无任务安排</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
</template>
|
|
|
</el-calendar>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="11">
|
|
|
+ <el-col :span="10">
|
|
|
<ul class="memo-list">
|
|
|
<li
|
|
|
v-for="(item, idx) in memoList"
|
|
|
@@ -251,19 +267,47 @@
|
|
|
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>{{ item.title }}</h4>
|
|
|
- <p class="memo-desc">{{ item.desc }}</p>
|
|
|
+ <h4
|
|
|
+ style="
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.projectName }}
|
|
|
+ </h4>
|
|
|
<p class="memo-meta">
|
|
|
- <span>{{ item.relatedTask || '相关任务' }}</span>
|
|
|
- <span>{{ item.time }}</span>
|
|
|
+ <span class="memo-meta-title">
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ <span class="memo-meta-date">
|
|
|
+ <img
|
|
|
+ style="
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 4px;
|
|
|
+ "
|
|
|
+ src="@/assets/index_images/index-icon4@2x.png"
|
|
|
+ alt="时间"
|
|
|
+ />
|
|
|
+ {{ item.memoDate }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="memo-content-text">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ {{ item.content }}
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
@@ -278,9 +322,10 @@
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
-
|
|
|
+ import { memoManageMixin } from '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManageMixin'
|
|
|
export default {
|
|
|
name: 'Dashboard',
|
|
|
+ mixins: [memoManageMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
province: '山西省',
|
|
|
@@ -351,75 +396,18 @@
|
|
|
op: '任务详情',
|
|
|
},
|
|
|
],
|
|
|
- memoList: [
|
|
|
- {
|
|
|
- type: 'warning',
|
|
|
- title: '山西省公立小学教育成本监审',
|
|
|
- desc: '要求学校提供近三年教学设备采购、师资薪酬等财务明细。',
|
|
|
- time: '2025-05-06',
|
|
|
- relatedTask: '山西省公立小学教育成本监审',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'warning',
|
|
|
- title: '山西省公立医院医疗服务成本监审',
|
|
|
- desc: '要依据药品采购、医疗器械使用、医护人员成本等情况提供明细。',
|
|
|
- time: '2025-05-06',
|
|
|
- relatedTask: '山西省公立医院医疗服务成本监审',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'info',
|
|
|
- title: '太原市生活垃圾处理成本监审',
|
|
|
- desc: '要求提供垃圾收集、运输、处理各环节的成本支出明细。',
|
|
|
- time: '2025-05-06',
|
|
|
- relatedTask: '太原市生活垃圾处理成本监审',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'info',
|
|
|
- title: '太原市市政设施维护成本监审',
|
|
|
- desc: '需要收集道路、桥梁、公共广场等市政设施的维护成本数据。',
|
|
|
- time: '2025-05-18',
|
|
|
- relatedTask: '太原市市政设施维护成本监审',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'warning',
|
|
|
- title: '山西省公立小学教育成本监审',
|
|
|
- desc: '要求学校提供近三年教学设备采购、师资薪酬等财务明细。',
|
|
|
- time: '2025-05-06',
|
|
|
- relatedTask: '山西省公立小学教育成本监审',
|
|
|
- },
|
|
|
- ],
|
|
|
+ memoList: [],
|
|
|
currentDate: new Date(),
|
|
|
selectedDate: '',
|
|
|
showTooltip: false,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initChart()
|
|
|
this.$el.querySelector('div.el-calendar__header').remove()
|
|
|
+ this.initChart()
|
|
|
+ this.initCalendarData()
|
|
|
},
|
|
|
methods: {
|
|
|
- // 获取自定义月份文本
|
|
|
- getCustomMonthText(date) {
|
|
|
- const year = date.getFullYear()
|
|
|
- const month = date.getMonth() + 1
|
|
|
-
|
|
|
- // 自定义格式
|
|
|
- return `${year}年${month}月`
|
|
|
- },
|
|
|
- handlePrevMonth() {
|
|
|
- this.currentDate = new Date(
|
|
|
- this.currentDate.getFullYear(),
|
|
|
- this.currentDate.getMonth() - 1,
|
|
|
- this.currentDate.getDate()
|
|
|
- )
|
|
|
- },
|
|
|
- handleNextMonth() {
|
|
|
- this.currentDate = new Date(
|
|
|
- this.currentDate.getFullYear(),
|
|
|
- this.currentDate.getMonth() + 1,
|
|
|
- this.currentDate.getDate()
|
|
|
- )
|
|
|
- },
|
|
|
// 判断是否为周末
|
|
|
isWeekend(date) {
|
|
|
const day = date.getDay() // 0-6，0表示周日，6表示周六
|
|
|
@@ -500,7 +488,8 @@
|
|
|
})
|
|
|
},
|
|
|
loadMoreNews() {
|
|
|
- this.$message.info('加载更多消息（可对接接口逻辑）')
|
|
|
+ // // 跳转备忘录页面
|
|
|
+ // this.$router.push('/costAudit/projectInfo/memoManage')
|
|
|
},
|
|
|
handleOp(type, row) {
|
|
|
this.$message.info(`执行【${type}】操作：${row.task}`)
|
|
|
@@ -515,124 +504,12 @@
|
|
|
addMemo() {
|
|
|
this.$message.info('添加新备忘录')
|
|
|
},
|
|
|
- // 获取农历日期
|
|
|
- getLunarDate(date) {
|
|
|
- const lunarMap = {
|
|
|
- '01': '初一',
|
|
|
- '02': '初二',
|
|
|
- '03': '初三',
|
|
|
- '04': '初四',
|
|
|
- '05': '初五',
|
|
|
- '06': '初六',
|
|
|
- '07': '初七',
|
|
|
- '08': '初八',
|
|
|
- '09': '初九',
|
|
|
- 10: '初十',
|
|
|
- 11: '十一',
|
|
|
- 12: '十二',
|
|
|
- 13: '十三',
|
|
|
- 14: '十四',
|
|
|
- 15: '十五',
|
|
|
- 16: '十六',
|
|
|
- 17: '十七',
|
|
|
- 18: '十八',
|
|
|
- 19: '十九',
|
|
|
- 20: '二十',
|
|
|
- 21: '廿一',
|
|
|
- 22: '廿二',
|
|
|
- 23: '廿三',
|
|
|
- 24: '廿四',
|
|
|
- 25: '廿五',
|
|
|
- 26: '廿六',
|
|
|
- 27: '廿七',
|
|
|
- 28: '廿八',
|
|
|
- 29: '廿九',
|
|
|
- 30: '三十',
|
|
|
- }
|
|
|
-
|
|
|
- const day = date.split('-')[2]
|
|
|
- return lunarMap[day] || ''
|
|
|
- },
|
|
|
- // 获取生肖信息
|
|
|
- getChineseZodiac(year) {
|
|
|
- const zodiacs = [
|
|
|
- '鼠',
|
|
|
- '牛',
|
|
|
- '虎',
|
|
|
- '兔',
|
|
|
- '龙',
|
|
|
- '蛇',
|
|
|
- '马',
|
|
|
- '羊',
|
|
|
- '猴',
|
|
|
- '鸡',
|
|
|
- '狗',
|
|
|
- '猪',
|
|
|
- ]
|
|
|
- const index = (year - 4) % 12
|
|
|
- return zodiacs[index]
|
|
|
- },
|
|
|
-
|
|
|
- // 获取天干地支
|
|
|
- getChineseCalendar(year, month) {
|
|
|
- const heavenlyStems = [
|
|
|
- '甲',
|
|
|
- '乙',
|
|
|
- '丙',
|
|
|
- '丁',
|
|
|
- '戊',
|
|
|
- '己',
|
|
|
- '庚',
|
|
|
- '辛',
|
|
|
- '壬',
|
|
|
- '癸',
|
|
|
- ]
|
|
|
- const earthlyBranches = [
|
|
|
- '子',
|
|
|
- '丑',
|
|
|
- '寅',
|
|
|
- '卯',
|
|
|
- '辰',
|
|
|
- '巳',
|
|
|
- '午',
|
|
|
- '未',
|
|
|
- '申',
|
|
|
- '酉',
|
|
|
- '戌',
|
|
|
- '亥',
|
|
|
- ]
|
|
|
-
|
|
|
- // 简化计算，实际需要更复杂的算法
|
|
|
- const stemIndex = (year - 3) % 10
|
|
|
- const branchIndex = (year - 3) % 12
|
|
|
-
|
|
|
- return `${heavenlyStems[stemIndex]}${earthlyBranches[branchIndex]}`
|
|
|
- },
|
|
|
-
|
|
|
- // 获取事件描述
|
|
|
- getEventDescription(date) {
|
|
|
- const event = this.memoList.find(
|
|
|
- (item) => item.time === date.substring(5)
|
|
|
- )
|
|
|
- return event ? `${event.title} [${event.time}]` : ''
|
|
|
- },
|
|
|
-
|
|
|
- // 处理日期点击
|
|
|
- handleDateClick(data) {
|
|
|
- this.currentDate = new Date(data.date)
|
|
|
- this.selectedDate = data.day
|
|
|
- this.showTooltip = true
|
|
|
-
|
|
|
- // 2秒后隐藏提示
|
|
|
- setTimeout(() => {
|
|
|
- this.showTooltip = false
|
|
|
- }, 2000)
|
|
|
- },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ @import '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManage.scss';
|
|
|
.dashboard-page {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
@@ -742,52 +619,74 @@
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
.memo-list {
|
|
|
+ width: 100%;
|
|
|
list-style: none;
|
|
|
- padding: 0;
|
|
|
+ padding: 20px;
|
|
|
margin: 0;
|
|
|
- /* 移除滚动条限制 */
|
|
|
- max-height: none;
|
|
|
- overflow-y: visible;
|
|
|
}
|
|
|
.memo-item {
|
|
|
- padding: 12px 0;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
+ transition: all 0.3s ease;
|
|
|
}
|
|
|
.memo-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- .memo-item i {
|
|
|
- margin-right: 10px;
|
|
|
- font-size: 18px;
|
|
|
- margin-top: 2px;
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
- .memo-item i.el-icon-warning {
|
|
|
- color: #f56c6c;
|
|
|
+ .memo-item .left-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-right: 12px;
|
|
|
+ padding-top: 2px;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
- .memo-item i.el-icon-info {
|
|
|
- color: #409eff;
|
|
|
+ .memo-item .left-icon img {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
}
|
|
|
.memo-content {
|
|
|
+ width: 100%;
|
|
|
flex: 1;
|
|
|
}
|
|
|
.memo-content h4 {
|
|
|
- margin: 0 0 5px 0;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .memo-meta {
|
|
|
+ width: 95%;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .memo-meta-title {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
- .memo-desc {
|
|
|
+ .memo-meta-date {
|
|
|
font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin: 0 0 8px 0;
|
|
|
- line-height: 1.5;
|
|
|
+ color: #909399;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
- .memo-meta {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .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;
|
|
|
@@ -803,44 +702,6 @@
|
|
|
color: #333333;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
- .month-text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
- .lunar-info {
|
|
|
- font-size: 14px;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .calendar-day:hover {
|
|
|
- background-color: #f5f7fa;
|
|
|
- }
|
|
|
-
|
|
|
- .calendar-day.selected {
|
|
|
- background-color: #ecf5ff;
|
|
|
- border-color: #a0d3e8;
|
|
|
- }
|
|
|
-
|
|
|
- .calendar-day.has-event {
|
|
|
- background-color: #f0f9eb;
|
|
|
- }
|
|
|
- .calendar-day.weekend .date-number {
|
|
|
- color: #fd8c2f;
|
|
|
- }
|
|
|
-
|
|
|
- .date-number {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #303133;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .lunar-date {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
|
|
|
.event-dot {
|
|
|
position: absolute;
|
cb_luzhixia