HealthStudentWeb/src/views/today/signsDetails.vue

<!--  -->
<template>
  <div class="signs">
    <van-nav-bar title="心率监测" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
    </van-nav-bar>
    <div class="main">
      <div class="date">
        <div class="left">
          <span>2023-04-29 18:08</span>
        </div>
        <div class="right">
          <span>历史监测</span>
        </div>
      </div>
      <div class="circle">
        <van-circle
          v-model="currentRateOut"
          layer-color="#f0f0f0"
          :color="$green"
          :rate="systolicRate"
          :speed="100"
          stroke-linecap="butt"
          size="210"
          stroke-width="120"
        >
          <template #default>
            <div class="circle-text">
              <div class="left">
                <span>92</span>
              </div>
              <div class="right">
                <img :src="circleBpm" alt="" />
                <span>bpm</span>
              </div>
            </div>
          </template></van-circle
        >
        <div class="circle-white" :style="{ borderColor: this.$green }"></div>
      </div>
      <div class="progress">
        <div class="progress-circle" :style="{ borderColor: this.$green, left: '45%' }"></div>
        <div class="state-item" v-for="(item, index) in statesList" :key="index">
          <div :class="['state-line', item.state]" :style="{ backgroundColor: item.color }"></div>
          <div class="state-text">
            <span :style="{}"> {{ item.text }} </span>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in statisticsList"
            :key="index"
            :style="{ backgroundColor: item.bgColor }"
          >
            <div class="middle">
              <span :style="{ color: '#fff' }">{{ item.value || '--' }}</span>
            </div>
            <div class="top">
              <span>{{ item.label || '--' }}</span>
            </div>
            <div class="line"></div>
            <div class="bottom">
              <span>{{ item.time || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="warn-tips">
        <div class="left">
          <img :src="warnImg" alt="" />
        </div>
        <div class="right">
          <p>
            <span class="orange">温馨提示: </span>检测数据仅供参考，<span class="orange"
              >不可做医疗诊断和治疗依据。</span
            >
          </p>
        </div>
      </div>
      <div class="tab-bar">
        <div class="date-tab-con">
          <div class="date-tab-list">
            <div
              :class="['date-tab-item', { active: current === index, notClick: false }]"
              @click="onTabClick(item.value, index)"
              v-for="(item, index) in dateList"
              :key="index"
            >
              <img :src="tabImgUrl" alt v-if="index == 3" />
              <span>{{ item.text }}</span>
              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
            </div>
            <img :src="dateImg" alt="" />
          </div>
        </div>
      </div>
      <div class="line-chart-con">
        <div class="line-chart" ref="lineChart"></div>
      </div>
      <div class="bottom">
        <div class="result">
          <div class="result-con">
            <div class="title">
              <span class="title-no-data">结果解读</span>
            </div>
            <div class="status">
              <p>心率正常</p>
              <ul>
                <li class="ordinary"></li>
                <li class="excellent active"></li>
                <li class="toobad"></li>
              </ul>
            </div>
            <div class="tips">
              <span>您的心率属于正常水平值，请继续保持注意合理膳食，少吃太甜太 咸的东西，少吃高热量食物。</span>
            </div>
          </div>
        </div>
        <div class="wran-tips">
          <p class="tips-title">温馨提示：</p>
          <p>检测数据仅供参考，不可做医疗诊断和治疗依据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRateOut: 100,
      systolicRate: 50,
      monitoringCount: '', //监测次数
      circleBpm: require('@/assets/today/icons/2_33.png'),
      // 状态条
      statesList: [
        { color: '#2ea7e0', text: '偏低', state: 'low' },
        { color: '#189b3b', text: '正常', state: 'normal' },
        { color: '#ff5f8b', text: '偏高', state: 'hight' }
      ],
      // 情绪状态列表
      statisticsList: [
        { label: '最低心率', value: '75', time: '08:15', bgColor: '#2ea7e0' },
        { label: '最高心率', value: '148', time: '10:15', bgColor: '#189b3b' },
        { label: '平均心率', value: '50', time: '18:15', bgColor: '#ff5f8b' }
      ],
      warnImg: require('@/assets/today/icons/2_25.png'),
      // 日期选择标签
      dateList: [
        { name: 'today', text: '今天', value: 0 },
        { name: 'week', text: '7天', value: 7 },
        { name: 'month', text: '30天', value: 30 }
        /* { name: 'weekReport', text: '周报', value: 49 } */
      ],
      tabImgUrl: require('@/assets/today/icons/statistical_form.png'),
      selectDownImg: require('@/assets/today/icons/select_down.png'),
      dateImg: require('@/assets/today/icons/2_12.png'),
      current: 0, // 日期选择标签-当前选中的标签
      currentDays: 0, //日期选择标签-日期参数
      emotionData: [],
      xAxisData: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'], //图表x轴展示的数据
      echarts: null
    };
  },
  watch: {
    emotionData: {
      handler() {
        this.initEchart();
      },
      deep: true
    }
  },
  computed: {
    echartsTitle() {
      return '心率数据图';
    },
    defaultOptions() {
      return {
        time: {
          useUTC: false
        },
        title: {
          text: this.echartsTitle,
          left: 10,
          right: 25,
          bottom: 20,
          top: '3%',
          textStyle: {
            fontSize: 22,
            fontWeight: 'bold'
          }
        },
        legend: {
          width: '60%',
          orient: 'horizontal',
          right: 'right',
          top: '5%',
          bottom: '1%',
          itemHeight: 5,
          itemWidth: 5,
          itemGap: 5,
          align: 'left',
          selectedMode: false,
          data: [
            {
              name: `心率偏低`,
              icon: 'rect',
              itemStyle: {
                color: '#2ea7e0'
              },
              textStyle: {
                fontSize: 12
              }
            },
            {
              name: `心率正常`,
              itemStyle: {
                color: '#189b3b'
              },
              icon: 'rect',
              textStyle: {
                fontSize: 12
              }
            },
            {
              name: `心率偏高`,
              itemStyle: {
                color: '#ff5f8b'
              },
              icon: 'rect',
              textStyle: {
                fontSize: 12
              }
            }
          ],
          formatter: function (name) {
            // 自定义显示内容
            if (name.length > 6) {
              return name.substring(0, 6) + '\n' + name.substring(6);
            } else {
              return name;
            }
          }
        },
        grid: {
          show: true,
          borderWidth: 1,
          top: '20%',
          left: '1%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          textStyle: {
            fontSize: 10
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 2
            }
          },
          nameLocation: 'left',
          axisLabel: {
            show: true,
            fontSize: 12,
            showMinLabel: true, //显示最小值
            showMaxLabel: true //显示最大值
          },
          data: this.xAxisData
        },
        dataZoom: [
          {
            start: 0,
            end: 100,
            textStyle: {
              color: '#FFF',
              fontSize: 14
            },
            show: false,
            height: 15,
            bottom: 5,
            handleStyle: {
              borderWidth: 1,
              borderCap: 'square'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
            align: 'center'
          },
          formatter: function (params) {
            return params[0].name + '</br>' + params[0].value;
          }
        },
        yAxis: {
          type: 'value',
          max: 150,
          min: 50,
          interval: 20,
          splitNumber: 1,
          boundaryGap: ['5%', '5%'],
          nameTextStyle: {
            fontSize: 13
          },
          alignTicks: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 13
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 1
            }
          }
        },
        series: [
          {
            name: `心率偏低`,
            type: 'line',
            padding: 5,
            data: this.emotionData,
            symbol: 'circle',
            symbolSize: 12,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#fff',
                borderWidth: 2,
                lineStyle: {
                  width: 6,
                  type: 'solid',
                  color: '#189b3b'
                }
              }
            }
          },
          {
            name: `心率正常`,
            type: 'line',
            data: ''
          },
          {
            name: `心率偏高`,
            type: 'line',
            data: ''
          }
        ]
      };
    }
  },
  created() {
    this.createList();
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    onNavBack() {
      this.$router.push({
        name: 'Today'
      });
    },
    onTabClick(value, index) {
      this.current = index;
      this.currentDays = value;
      this.createList();
    },
    createList() {
      // 模拟数据
      this.emotionData = [];
      const colors = ['#189b3b', '#2ea7e0', '#ff5f8b'];
      for (let i = 0; i < 10; i++) {
        let value = Math.floor(Math.random() * 60) + 80;
        let color = colors[Math.floor(Math.random() * colors.length)];
        this.emotionData.push({
          value,
          itemStyle: {
            borderColor: color
          }
        });
      }
    },
    initEchart() {
      if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
        this.echarts.dispose();
      }
      this.echarts = this.$echarts.init(this.$refs.lineChart);
      this.echarts.setOption(this.defaultOptions);
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss//signs-details.scss';
/* @import url(); 引入css类 */
</style>