1

wwl

2025-06-20 375f79172e357300895dbae7ab7fb19bf6e4b4e1

 src/views/index.vue

@@ -1,5 +1,32 @@
<template>
  <div class="centre">
    <!-- 今日通知 -->
    <div style="display: flex; justify-content: center; align-items: center;">
      <h4>今日通知</h4>
    </div>
    <div class="notice-area">
      <el-carousel :interval="2000" direction="vertical" :autoplay="true" :loop="true" height="120px"
        v-if="groupedNoticeList.length > 0" class="carousel">
        <el-carousel-item v-for="(group, index) in groupedNoticeList" :key="index">
          <div class="notice-group">
            <div class="notice-item" v-for="notice in group" :key="notice.noticeId"
              @click="goToNotice(notice.noticeId)">
              <el-tag size="small" :type="notice.noticeType === '1' ? 'info' : 'warning'">
                {{ notice.noticeType === '1' ? '通知' : '公告' }}
              </el-tag>
              <span class="notice-title">{{ notice.noticeTitle || '无标题' }}</span>
              <span class="notice-time">{{ parseTime(notice.createTime, '{y}-{m}-{d}') || '无时间' }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div v-else class="no-notice">暂无通知</div>
    </div>

    <!-- 今日统计 -->
    <div style="display: flex; justify-content: center; align-items: center;">
      <h4>今日统计</h4>
    </div>
    <div class="top">
      <div class="add">
        <div class="img">
@@ -34,8 +61,13 @@
        </div>
      </div>
    </div>

    <!-- 近一月统计 -->
    <div style="display: flex; justify-content: center; align-items: center;">
      <h4>近一月统计</h4>
    </div>
    <div class="data-view">
      <div id="main" style="width:95%;height:330px"></div>
      <div id="main" style="width: 95%; height: 330px"></div>
    </div>
    <div class="view">
      <div id="main2"></div>
@@ -46,11 +78,13 @@

<script>
import { getCustomer, getOrder, getReportToday, getTobeToday, getPieChart, getChart } from "@/api/home";
import { noticeToday } from "@/api/system/notice";
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/line');

export default {
  data() {
@@ -67,293 +101,304 @@
      teamYYNum: [],
      PieChart: [],
      PieChart2: [],
    }
      noticeList: [],
      groupedNoticeList: [], // 分组后的通知列表
      loading: false
    };
  },

  created() {
    this.getList();

  },

  watch: {
        $route(to, from) {
            window.location.reload(); //监测到路由发生跳转时刷新一次页面
            // this.$router.go(0);
        },
    $route(to, from) {
      window.location.reload();
    },
 
    noticeList: {
      handler(newList) {
        // 将通知按每组三条分组
        this.groupedNoticeList = this.chunkArray(newList, 3);
        console.log('groupedNoticeList:', this.groupedNoticeList); // 调试
      },
      deep: true
    }
  },

  methods: {
 
    goToNotice(noticeId) {
      this.$router.push({
        path: '/notice',
        query: { noticeId }
      });
    },
    getList() {
      this.loading = true;
      // 查询今日登记
      getCustomer().then((response) => {
        this.Customer = response
        this.loading = false;
      });
      // 查询今日已检
      getOrder().then((response) => {
        this.Order = response
        this.loading = false;
      });
      // 查询今日报告
      getReportToday().then((response) => {
        this.ReportToday = response
        this.loading = false;
      });
      // 查询今日待检
      getTobeToday().then((response) => {
        this.TobeToday = response
        this.loading = false;
      });
      // 折线图
      getChart().then((response) => {
        response.data.forEach(item => {
          this.LineChart.push(item.date)
          this.personYYNum.push(item.tdcoun);
          this.reportNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);

      // 查询所有公告
      noticeToday().then(response => {
        console.log('Notice API response:', response);
        this.noticeList = response.rows || response.data || [];
        console.log('noticeList:', this.noticeList);
        this.loading = false;
        this.$nextTick(() => {
          console.log('Carousel updated');
        });
        let myChart = this.$echarts.init(document.getElementById('main'));
      }).catch(error => {
        console.error('Notice API error:', error);
        this.$message.error("获取通知失败：" + error.message);
        this.loading = false;
      });

      // 查询今日登记
      getCustomer().then(response => {
        this.Customer = response.data || response;
        this.loading = false;
      });

      // 查询今日已检
      getOrder().then(response => {
        this.Order = response.data || response;
        this.loading = false;
      });

      // 查询今日报告
      getReportToday().then(response => {
        this.ReportToday = response.data || response;
        this.loading = false;
      });

      // 查询今日待检
      getTobeToday().then(response => {
        this.TobeToday = response.data || response;
        this.loading = false;
      });

      // 折线图
      getChart().then(response => {
        response.data.forEach(item => {
          this.LineChart.push(item.date);
          this.reportNum.push(item.tdcoun);
          this.personYYNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);
        });

        let myChart = this.$echarts.init(document.getElementById('main'));
        myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['每日体检登记数', '每日团体登记数', '每日发布报告数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          tooltip: { trigger: 'axis' },
          legend: { data: ['每日体检登记数', '每日团体登记数', '每日发布报告数'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          toolbox: { feature: { saveAsImage: {} } },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "blue",
                size: 12,
                width: 0,
                tyle: "solid"
              }
              lineStyle: { width: 0, color: 'blue', type: 'solid' }
            },
            data: this.LineChart
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 50,
            interval: 5
          },
          yAxis: { type: 'value', min: 0, max: 400, interval: 20 },
          series: [
            {
              name: '每日体检登记数',
              type: 'line',
              stack: 'Total',
              data: this.personYYNum
            },
            {
              name: '每日团体登记数',
              type: 'line',
              stack: 'Total',
              data: this.reportNum
            },
            {
              name: '每日发布报告数',
              type: 'line',
              stack: 'Total',
              data: this.teamYYNum
            },
            { name: '每日体检登记数', type: 'line', stack: 'Total', data: this.personYYNum },
            { name: '每日团体登记数', type: 'line', stack: 'Total', data: this.reportNum },
            { name: '每日发布报告数', type: 'line', stack: 'Total', data: this.teamYYNum }
          ]
        });

        })
        let sizeFun = function () {
          myChart.resize()
        }
        window.addEventListener("resize", sizeFun)

        const sizeFun = () => myChart.resize();
        window.addEventListener('resize', sizeFun);
        this.loading = false;
      });

      // 饼状图
      getPieChart().then((response) => {
      getPieChart().then(response => {
        if (response.data) {

          if (response.data.tjdj.length === 0) {

            this.PieChart = []
            this.PieChart = [
              {
                "name": "体检登记人数分布",
                "count": 1,
                "value": 10
              },

            ]
          if (response.data.tjdj == 0 || !response.data.tjdj?.length) {
            this.PieChart = [{ name: '体检登记人数分布', count: 1, value: 10 }];
          } else {
            this.PieChart = response.data.tjdj
            this.PieChart.forEach(item => {
              item.value = item.count
            })
            this.PieChart.reverse()
            this.PieChart.push(this.PieChart[0])
            this.PieChart.splice(0, 1)

            this.PieChart = response.data.tjdj;
            this.PieChart.forEach(item => { item.value = item.count; });
            this.PieChart.reverse();
            this.PieChart.push(this.PieChart[0]);
            this.PieChart.splice(0, 1);
          }

          let myChart2 = this.$echarts.init(document.getElementById('main2'));
          myChart2.setOption({
            title: {
              text: '体检登记人数分布',
              top: '5'
            title: { text: '体检登记人数分布', top: '5' },
            tooltip: { trigger: 'item' },
            legend: { top: '80%', left: 'center' },
            series: [{
              type: 'pie',
              radius: ['16%', '54%'],
              center: ['50%', '43%'],
              avoidLabelOverlap: false,
              startAngle: 180,
              minAngle: 10,
              data: this.PieChart,
              emphasis: {
                itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
              }
            }]
          });

            },

            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '80%',
              left: 'center'
            },
            series: [
              {
                // name: 'Access From',
                type: 'pie',
                radius: ['16%', '54%'],
                center: ["50%", "43%"],
                avoidLabelOveralap:false,
                startAngle:180,
                minAngle:10,
                data: this.PieChart,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
          })

          if(response.data.tjyc == 0){
            this.PieChart2 = []
            this.PieChart2 = [
              {
                "name": "体检结果异常人数分布",
                "count": 1,
                "value": 10
              },

            ]
          }else if (response.data.tjyc.length === 0) {
            this.PieChart2 = []
            this.PieChart2 = [
              {
                "name": "体检结果异常人数分布",
                "count": 1,
                "value": 10
              },

            ]
          if (response.data.tjyc == 0 || !response.data.tjyc?.length) {
            this.PieChart2 = [{ name: '体检结果异常人数分布', count: 1, value: 0 }];
          } else {
            this.PieChart2 = response.data.tjyc
            this.PieChart2.reverse()
            this.PieChart2.push(this.PieChart2[0])
            this.PieChart2.splice(0, 1)
            this.PieChart2.forEach(item => {
              item.value = item.count
            })
            // this.TobeToday = response
            this.PieChart2 = response.data.tjyc;
            this.PieChart2.reverse();
            this.PieChart2.push(this.PieChart2[0]);
            this.PieChart2.splice(0, 1);
            this.PieChart2.forEach(item => { item.value = item.count; });
          }

          let myChart3 = this.$echarts.init(document.getElementById('main3'));

          myChart3.setOption({
            title: {
              text: '体检结果异常人数分布',
              top: '5'
            title: { text: '体检结果异常人数分布', top: '5' },
            tooltip: { trigger: 'item' },
            legend: { top: '80%', left: 'center' },
            series: [{
              type: 'pie',
              radius: ['16%', '54%'],
              center: ['50%', '43%'],
              avoidLabelOverlap: false,
              startAngle: 180,
              minAngle: 10,
              data: this.PieChart2,
              emphasis: {
                itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
              }
            }]
          });

            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '80%',
              left: 'center'
            },
            series: [
              {
                // name: 'Access From',
                type: 'pie',
                radius: ['16%', '54%'],
                center: ["50%", "43%"],
                avoidLabelOveralap:false,
                startAngle:180,
                minAngle:10,
                data: this.PieChart2,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
          })
        }


        window.onresize = function () {
          myChart2.resize()
          myChart3.resize()
          window.onresize = () => {
            myChart2.resize();
            myChart3.resize();
          };
        }
        this.loading = false;
      });
    },

    // 数组分组方法
    chunkArray(array, size) {
      if (!array || array.length === 0) return [];
      const result = [];
      for (let i = 0; i < array.length; i += size) {
        result.push(array.slice(i, i + size));
      }
      // 确保循环滚动平滑，若不足 size 条，补齐
      if (array.length % size !== 0 && array.length > size) {
        const lastGroup = result[result.length - 1];
        while (lastGroup.length < size) {
          lastGroup.push(array[lastGroup.length % array.length]);
        }
      }
      return result;
    },

    parseTime(time, cFormat) {
      if (!time) return '';
      try {
        const date = new Date(time);
        if (isNaN(date.getTime())) return '';
        const formatObj = {
          y: date.getFullYear(),
          m: String(date.getMonth() + 1).padStart(2, '0'),
          d: String(date.getDate()).padStart(2, '0'),
          h: String(date.getHours()).padStart(2, '0'),
          i: String(date.getMinutes()).padStart(2, '0'),
          s: String(date.getSeconds()).padStart(2, '0')
        };
        return cFormat.replace(/{([ymdhis]+)}/g, (result, key) => formatObj[key] || '');
      } catch (error) {
        console.error('parseTime error:', error, 'time:', time);
        return '';
      }
    }
  },


  mounted() {

  }
}


};
</script>

<style>
.centre {
  height: 820px;
  margin: 15px 15px;
  min-height: 820px;
  margin: 15px;
  background-color: #f3f3f3;
  padding: 10px;
}

.notice-area {
  width: 100%;
  min-height: 120px;
  /* 调整为三条通知高度 */
  background-color: #fff;
  margin: 10px 0;
  padding: 0 20px;
}

.carousel {
  width: 100% !important;
}

.notice-group {
  display: flex;
  flex-direction: column;
  height: 120px;
  /* 确保包含三条通知 */
}

.notice-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  cursor: pointer;
}

.notice-title {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-time {
  font-size: 12px;
  color: #999;
  margin-left: 20px;
}

.no-notice {
  width: 100%;
  height: 120px;
  /* 与轮播高度一致 */
  line-height: 120px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.top {
  width: 100%;
  display: flex;
  height: 120px;

}

.add {
  width: 380px;
  width: 320px;
  height: 75px;
  margin-top: 30px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: #fff;
  display: flex
  display: flex;
}

.img {
@@ -367,7 +412,6 @@
.image {
  width: 60px;
  height: 60px;

}

.txt {
@@ -383,7 +427,7 @@

.data-view {
  margin: 0 15px;
  height: 323px !important
  height: 323px !important;
}

#main {
@@ -391,19 +435,13 @@
}

.view {
  margin: 0px 15px;
  margin: 0 15px;
  padding-top: 15px;
  height: 350px;
  min-height: 350px;
  display: flex;
}

#main2 {
  width: 820px;
  height: 350px;
  background-color: #fff;
  margin-right: 20px;
}

#main2,
#main3 {
  width: 820px;
  height: 350px;