1

lkk

2025-04-29 cb9989c7167856993a02238fde5a0ddd37c2c0cd

 src/views/index.vue

@@ -1,5 +1,8 @@
<template>
  <div class="centre">
    <div style="display:flex;justify-content: center;align-items: center;">
      <h4>今日统计</h4>
    </div>
    <div class="top">
      <div class="add">
        <div class="img">
@@ -33,6 +36,9 @@
          <div class="day">今日待检 {{ TobeToday }}</div>
        </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>
@@ -72,10 +78,18 @@

  created() {
    this.getList();

  },
  watch: {
        $route(to, from) {
            window.location.reload(); //监测到路由发生跳转时刷新一次页面
            // this.$router.go(0);
        },
    },
 

  methods: {

 
    getList() {
      this.loading = true;
      // 查询今日登记
@@ -102,8 +116,8 @@
      getChart().then((response) => {
        response.data.forEach(item => {
          this.LineChart.push(item.date)
          this.personYYNum.push(item.tdcoun);
          this.reportNum.push(item.grcoun);
          this.reportNum.push(item.tdcoun);
          this.personYYNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);

        });
@@ -144,8 +158,8 @@
          yAxis: {
            type: 'value',
            min: 0,
            max: 50,
            interval: 5
            max: 400,
            interval: 20
          },
          series: [
            {
@@ -169,7 +183,7 @@
          ]

        })
        let sizeFun = function () {
        let sizeFun =  ()=> {
          myChart.resize()
        }
        window.addEventListener("resize", sizeFun)
@@ -179,119 +193,150 @@

      // 饼状图
      getPieChart().then((response) => {
        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.PieChart2 = response.data.tjyc
        if (this.PieChart2 == 0) {
          this.PieChart2 = [
          
           
           
            {
              "name": "40-60岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "16-40岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "3-16岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "0-3岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "60岁以上",
              "count": 1,
              "value": 1
            }
          ]
        }
        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
        let myChart2 = this.$echarts.init(document.getElementById('main2'));
        let myChart3 = this.$echarts.init(document.getElementById('main3'));
        myChart2.setOption({
          title: {
            text: '体检登记人数分布',
            top: '5'
        if (response.data) {

          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '78%',
            left: 'center'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['16%', '54%'],
              center: ["50%", "43%"],
              data: this.PieChart,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
        })
        myChart3.setOption({
          title: {
            text: '体检结果异常人数分布',
            top: '5'
          if(response.data.tjdj == 0){
            this.PieChart = []
            this.PieChart = [
              {
                "name": "体检登记人数分布",
                "count": 1,
                "value": 10
              },

          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '78%',
            left: 'center'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['16%', '54%'],
              center: ["50%", "43%"],
              data: this.PieChart2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
            ]
          }else if (response.data.tjdj.length === 0) {

            this.PieChart = []
            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)

          }

          let myChart2 = this.$echarts.init(document.getElementById('main2'));
          myChart2.setOption({
            title: {
              text: '体检登记人数分布',
              top: '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)'
                  }
                }
              }
            }]
        })
        window.onresize = function () {
              }]
          })

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

            ]
          }else if (response.data.tjyc.length === 0) {
            this.PieChart2 = []
            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
          }
          let myChart3 = this.$echarts.init(document.getElementById('main3'));

          myChart3.setOption({
            title: {
              text: '体检结果异常人数分布',
              top: '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 =  () =>{
          myChart2.resize()
          myChart3.resize()
        }
        }


      
        this.loading = false;
      });

    }
  },

@@ -306,9 +351,10 @@

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

.top {
@@ -329,7 +375,7 @@
}

.img {
  width: 150px;
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
@@ -354,7 +400,8 @@
}

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

#main {
@@ -363,7 +410,8 @@

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