cbjsxt-front-master/src/views/home/index.vue

<template>
  <div class="dashboard-page">
    <el-row :gutter="20" class="mb-20 card-row">
      <el-col :span="13">
        <el-card shadow="hover">
          <div class="card-header">
            <div class="left-icon">
              <img src="@/assets/index_images/index-icon1@2x.png" alt="" />
              <h3>成本监审办理情况</h3>
            </div>
            <div class="header-actions">
              <el-select
                v-model="province"
                placeholder="请选择省份"
                style="width: 100px; margin-right: 10px"
              >
                <el-option label="山西省" value="山西省"></el-option>
              </el-select>
              <el-select
                v-model="year"
                placeholder="请选择年份"
                style="width: 100px"
              >
                <el-option label="2025" value="2025"></el-option>
              </el-select>
            </div>
          </div>
          <div
            ref="chartRef"
            style="width: 100%; height: 400px; margin-top: 20px"
          ></div>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card shadow="hover">
          <div class="card-header">
            <div class="left-icon">
              <img src="@/assets/index_images/index-icon2@2x.png" alt="" />
              <h3>最新消息</h3>
            </div>
            <el-button type="text" size="small" @click="loadMoreNews">
              更多 &gt;
            </el-button>
          </div>
          <ul class="news-list card-content">
            <li v-for="(item, idx) in newsList" :key="idx" class="news-item">
              <div class="news-content">
                <div class="news-title">
                  <i class="icon-dot"></i>
                  {{ item.content }}
                </div>
                <div class="news-meta">
                  <div class="left-icon">
                    <img
                      style="width: 14px; height: 14px; vertical-align: middle"
                      src="@/assets/index_images/index-icon3@2x.png"
                      alt="管理员"
                    />
                    <span>管理员</span>
                  </div>
                  <div class="left-icon">
                    <img
                      style="width: 14px; height: 14px; vertical-align: middle"
                      src="@/assets/index_images/index-icon4@2x.png"
                      alt="时间"
                    />
                    <span>{{ item.date }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：本人待办事项 -->
    <el-row class="mb-20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="card-header">
            <div class="left-icon">
              <img src="@/assets/index_images/index-icon5@2x.png" alt="" />
              <h3>本人待办事项</h3>
            </div>
            <el-select
              v-model="auditType"
              placeholder="请选择监审类型"
              style="width: 220px"
            >
              <el-option
                label="山西省公立幼儿园教育成本监审"
                value="山西省公立幼儿园教育成本监审"
              ></el-option>
            </el-select>
          </div>
          <el-table
            :data="todoList"
            style="width: 100%"
            :stripe="false"
            class="no-zebra"
          >
            <el-table-column label="预警" width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.warning" type="warning">预警</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="task" label="成本监审任务"></el-table-column>
            <el-table-column prop="unit" label="被监审单位"></el-table-column>
            <el-table-column
              prop="auditForm"
              label="监审形式"
            ></el-table-column>
            <el-table-column
              prop="auditPeriod"
              label="监审期间"
            ></el-table-column>
            <el-table-column prop="status" label="办理状态"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.op === '任务详情'"
                  type="text"
                  size="small"
                  @click="handleOp('详情', scope.row)"
                >
                  任务详情
                </el-button>
                <el-button
                  v-if="scope.row.op === '任务办理'"
                  type="text"
                  size="small"
                  @click="handleOp('办理', scope.row)"
                >
                  任务办理
                </el-button>
                <el-button
                  v-if="scope.row.op === '查看'"
                  type="text"
                  size="small"
                  @click="handleOp('查看', scope.row)"
                >
                  查看
                </el-button>
                <el-button
                  v-if="scope.row.op === '审核'"
                  type="text"
                  size="small"
                  @click="handleOp('审核', scope.row)"
                >
                  审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行：本人备忘录 -->
    <el-row class="card-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="card-header">
            <h3>本人备忘录</h3>
            <div class="search-actions">
              <el-input
                v-model="searchKeyword"
                placeholder="请输入关键词"
                style="width: 180px"
                clearable
              ></el-input>
              <el-button
                type="primary"
                style="margin-left: 10px"
                size="small"
                icon="el-icon-search"
                @click="searchMemo"
              >
                查询
              </el-button>
            </div>
          </div>
          <el-row class="mt20">
            <el-col :span="13">
              <div class="calendar-container">
                <div class="calendar-header">
                  <el-button
                    type="text"
                    class="calendar-btn"
                    @click="handlePrevMonth"
                  >
                    <i class="el-icon-arrow-left"></i>
                  </el-button>
                  <span class="month-text">{{ setCalendarTitle() }}年</span>
                  <el-button
                    type="text"
                    class="calendar-btn"
                    @click="handleNextMonth"
                  >
                    <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
                <el-calendar
                  ref="calendar"
                  v-model="selectedDate"
                  :first-day-of-week="0"
                >
                  <!-- 自定义日期单元格 -->
                  <template slot="dateCell" slot-scope="{ date, data }">
                    <el-tooltip placement="top">
                      <div
                        class="calendar-cell"
                        @click="handleDateClick(date, data)"
                      >
                        <!-- 公历日期 -->
                        <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 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="10">
              <ul class="news-list card-content">
                <li
                  v-for="(item, idx) in memoList"
                  :key="idx"
                  class="news-item mb10"
                >
                  <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
                          style="
                            width: 14px;
                            height: 14px;
                            vertical-align: middle;
                          "
                          src="@/assets/index_images/index-icon4@2x.png"
                          alt="时间"
                        />
                        <span>{{ item.memoDate }}</span>
                      </div>
                    </div>
                    <div class="news-meta">
                      <i class="el-icon-document"></i>
                      <span class="content-text">{{ item.content }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { memoManageMixin } from '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManageMixin'
  export default {
    name: 'Dashboard',
    mixins: [memoManageMixin],
    data() {
      return {
        province: '山西省',
        year: '2025',
        auditType: '山西省公立幼儿园教育成本监审',
        searchKeyword: '',
        newsList: [
          {
            content: '依据定价管理规范，全面开展《山西省定价目录》修订工作',
            date: '2025-05-06 14:00',
          },
          {
            content:
              '为适应市场发展新形势，正式启动定价管理范畴内《山西省定价目录》的调整优化工作',
            date: '2025-05-06 14:00',
          },
          {
            content:
              '按照定价管理的既定流程和标准，积极推进《山西省定价目录》的更新完善事宜',
            date: '2025-05-06 14:00',
          },
          {
            content:
              '基于当前价格管理工作的实际需求，着力实施定价管理中《山西省定价目录》的修改完善行动',
            date: '2025-05-06 14:00',
          },
          {
            content:
              '为进一步提升定价管理的科学性与精准性，全面开启《山西省定价目录》的深度修订进程',
            date: '2025-05-06 14:00',
          },
        ],
        todoList: [
          {
            warning: true,
            task: '山西省公立幼儿园教育成本监审',
            unit: 'XX幼儿园、YY幼儿园、ZZ幼儿园',
            auditForm: '实地监审',
            auditPeriod: '2023-2024年',
            status: '进行中',
            op: '任务办理',
          },
          {
            warning: false,
            task: '山西省公立医院医疗服务成本监审',
            unit: '山西省人民医院',
            auditForm: '实地监审',
            auditPeriod: '2023-2024年',
            status: '待审核',
            op: '审核',
          },
          {
            warning: false,
            task: '太原市生活垃圾处理成本监审',
            unit: '太原市环卫局',
            auditForm: '书面监审',
            auditPeriod: '2023-2024年',
            status: '已完成',
            op: '查看',
          },
          {
            warning: false,
            task: '山西省公立小学教育成本监审',
            unit: '太原市实验小学等10所学校',
            auditForm: '实地监审',
            auditPeriod: '2023-2024年',
            status: '待分配',
            op: '任务详情',
          },
        ],
        memoList: [],
        currentDate: new Date(),
        selectedDate: '',
        showTooltip: false,
      }
    },
    mounted() {
      this.$el.querySelector('div.el-calendar__header').remove()
      this.initChart()
      this.initCalendarData(5)
    },
    methods: {
      // 判断是否为周末
      isWeekend(date) {
        const day = date.getDay() // 0-6，0表示周日，6表示周六
        return day === 0 || day === 6 // 周日或周六为周末
      },
      initChart() {
        const chart = echarts.init(this.$refs.chartRef)
        let data = [
          { value: 10, name: '输配电' },
          { value: 5, name: '燃气' },
          { value: 20, name: '交通运输' },
          { value: 15, name: '供热' },
          { value: 30, name: '托育服务' },
          { value: 25, name: '养老服务' },
          { value: 40, name: '文化旅游' },
        ]
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            show: true,
            itemWidth: 20,
            itemHeight: 8,
            itemGap: 10,
            data: ['已办', '在办'],
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '2%', // 增加底部空间以容纳滚动条和旋转的标签
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: data.map((item) => item.name),
            // 启用滚动条
            axisLabel: {
              interval: 0,
              rotate: 0,
            },
            axisTick: {
              alignWithLabel: true,
            },
            boundaryGap: true,
            // 滚动配置
            scrollBar: {
              show: true,
              height: 10,
            },
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '已办',
              type: 'bar',
              barWidth: '10%',
              data: [45, 38, 42, 39, 43, 48, 46, 44, 47, 52, 49, 51],
              itemStyle: {
                color: '#1890ff',
              },
            },
            {
              name: '在办',
              type: 'bar',
              barWidth: '10%',
              data: [18, 25, 16, 22, 20, 17, 19, 21, 24, 18, 23, 20],
              itemStyle: {
                color: '#ff9c6e',
              },
            },
          ],
        }
        chart.setOption(option)
        window.addEventListener('resize', () => {
          chart.resize()
        })
      },
      loadMoreNews() {
        //  跳转通知公告页面
        this.$router.push('/personal/notice')
      },
      handleOp(type, row) {
        this.$message.info(`执行【${type}】操作：${row.task}`)
      },
      searchMemo() {
        this.$message.info(`搜索备忘录，关键词：${this.searchKeyword}`)
      },
      hasEventOnDate(date) {
        // 检查指定日期是否有备忘录事件
        return this.memoList.some((item) => item.time === date.substring(5))
      },
      addMemo() {
        this.$message.info('添加新备忘录')
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '@/views/costAudit/projectInfo/auditProjectManage/memoManage/memoManage.scss';
  .mb-20 {
    /* border: 1px solid red; */
    margin-bottom: 20px;
  }
  .icon-dot {
    width: 8px;
    height: 8px;
    background-color: #999999;
    border-radius: 50%;
    display: inline-block;
  }
  /* 确保同一行的卡片高度一致 */
  .card-row {
    display: flex;
    flex-wrap: wrap;
  }
  .card-row .el-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  ::v-deep .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .card-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, #e8edfc, #ffffff);
    padding: 10px 20px;
    box-sizing: border-box;
  }

  .header-actions {
    display: flex;
    align-items: center;
  }
  .calendar-actions {
    display: flex;
    align-items: center;
  }
  .search-actions {
    display: flex;
    align-items: center;
  }
  .news-list {
    width: 100%;
  }
  .card-content {
    width: 100%;
    padding: 20px;
  }
  .news-item {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
  }
  .news-item:last-child {
    border-bottom: none;
  }
  .news-content {
    width: 100%;
    line-height: 1.6;
    font-size: 14px;
    flex: 1;
  }
  .news-title {
    display: flex;
    align-items: flex-center;
    margin-bottom: 8px;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .news-title i {
    color: #f56c6c;
    margin-right: 8px;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .news-meta {
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 22px;
  }
  .news-meta .left-icon {
    margin-right: 15px;
  }
  .news-meta .left-icon span {
    margin-left: 4px;
    color: #61657e;
    font-size: 14px;
  }
  .calendar-day {
    position: relative;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
  }
  .has-event {
    background-color: #f0f9eb;
  }
  .event-dot {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: #67c23a;
    border-radius: 50%;
  }
  .left-icon {
    display: flex;
    align-items: center;
    img {
      width: 20px;
    }
  }
  .title {
    font-size: 18px;
  }
  /* 彻底移除表格斑马纹效果 */
  .no-zebra ::v-deep .el-table__row:nth-child(even) {
    background-color: transparent;
  }
  .no-zebra ::v-deep .el-table__body tr:hover > td {
    background-color: #f5f7fa !important;
  }
  .w40 {
    width: 40%;
  }
  .content-text {
    display: inline-block;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #61657e;
    font-size: 14px;
  }
  h3 {
    margin: 0;
    // font-size: 16px;
    font-weight: bolder;
    color: #333333;
    margin-left: 10px;
  }

  .event-dot {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: #67c23a;
    border-radius: 50%;
  }

  .tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .tooltip.show {
    opacity: 1;
  }

  .tooltip-content {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-header {
    width: 95%;
    margin: 15px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #f0f4fd;
    padding: 5px 0;
  }
  .calendar-btn {
    margin: 0 20px;
    cursor: pointer;
    font-size: 20px;
    color: #606266;
    transition: color 0.3s ease;
    &:hover {
      color: #409eff;
    }
  }
  /* 使星期几头部居中显示 */
  ::v-deep .el-calendar-table thead th {
    text-align: center !important;
    font-weight: 500;
    color: #606266;
  }
</style>