<!--
 * @Date: 2023-10-30 11:30:22
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-11-07 09:23:17
 * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\index.vue
 * @description:
-->
<template>
  <!-- 周/月报 -->
  <div class="report">
    <van-nav-bar title="心理监测周报" :border="true" @click-left="onNavBack">
      <template #left v-if="isShowLeft">
        <van-icon name="arrow-left" size="24" style="padding: 0" />
        <span>返回</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <!-- 总评 -->
      <div class="overall-rating">
        <div class="con">
          <p class="space-between">
            <span class="bold">本周总评</span>
            <span class="time">{{
              resetDate(weekResult.StartDate, weekResult.EndDate) || "--"
            }}</span>
          </p>
          <p class="bold-pro" :style="{ color: calcResultColor(weekResult.SummaryLevel) || '--' }">
            {{ weekResult.Summary }}
          </p>
          <p class="normal">监测次数: {{ weekResult.Total || "--" }}次</p>
          <p class="normal">{{ weekResult.Explain || "--" }}</p>
        </div>

      </div>
      <div class="line"></div>
      <div class="pie-chart-top">
        <p class="bold">上周趋势对比</p>
        <p>{{ resetDate(weekResult.StartDate, weekResult.EndDate) || "--" }}</p>
      </div>
      <div class="count">
        <p>监测次数：{{ weekResult.LastTotal || "--" }}次</p>
      </div>
      <!-- 趋势对比-饼状图 -->
      <div class="pie-chart-con">
        <div class="pie-chart-left">
          <div id="pieChart" ref="pieChart"></div>
        </div>

        <div class="pie-chart-right">
          <div class="list">
            <div class="item" v-for="(item, index) in pieRightList" :key="index">
              <div class="item-left">
                <div class="circle" :style="{ backgroundColor: item.color }"></div>
                <span class="text">{{ item.text || "--" }}</span>
              </div>

              <div class="item-right">
                <span :style="{ color: item.color }">{{
                  item.count ? item.count + "次" : "0次"
                }}</span>
                <label :style="{ color: item.color }">{{
                  item.percentage ? "(" + item.percentage + "%" + ")" : "(0%)"
                }}</label>
              </div>

              <div class="status" v-if="isShowCompare">
                <img :src="calcImg(item.percentage, item.lastPercentage)" alt="" />
                <span :style="{
                  color:
                    calcImg(item.percentage, item.lastPercentage, true) != 0
                      ? item.color
                      : '',
                }">{{
                  calcImg(item.percentage, item.lastPercentage, true)
                    ? Math.abs(
                      calcImg(item.percentage, item.lastPercentage, true)
                    ) + "%"
                    : "持平"
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="list">
          <div class="item" v-for="(item, index) in statisticsList" :key="index">
            <div class="top">
              <span>{{ item.label || "--" }}</span>
            </div>

            <div class="middle">
              <span :style="{ color: calcResultColor(item.level) }">{{
                item.value || "--"
              }}</span>
            </div>

            <div class="bottom">
              <span>{{ item.time || "--" }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <!-- 数据图-柱形图 -->
      <div class="bar-chart">
        <div class="echart" ref="charts"></div>
      </div>
      <div class="line"></div>
      <!-- 建议 -->
      <div class="advice">
        <div class="content">
          <p class="title">健康建议</p>
          <p>{{ weekResult.Advice || "--" }}</p>
        </div>
      </div>
      <!-- 概览 -->
      <div class="overview">
        <div class="content">
          <div class="title">
            <span class="title-text">{{ surveyTitle }}</span>
            <div class="mood-list">
              <div class="item" v-for="(item, index) in emotionList" :key="index">
                <p>
                  <span :style="{ color: item.color }" class="day">{{
                    item.days
                  }}</span>
                  <span class="day-text">天</span>
                  <img :src="calcWeekImg(item.days, item.lastDay)" alt="" v-if="isShowCompare" />
                  <span class="day-text status" v-if="isShowCompare">{{
                    calcWeekImg(item.days, item.lastDay, true)
                  }}</span>
                </p>
                <p>{{ item.text }}</p>
              </div>
            </div>
            <!-- <div class="mood-list-no-data" v-else>
                            <div class="no-data">
                                <img src="../../../../assets/img/no_data_01.png" alt />
                                <p>暂无数据</p>
                            </div>
                        </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="main no-data">
      <img src="../../../../assets/img/no_data_01.png" alt />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import { anxietyText } from "@/config/models";
import { isNotNull } from "@/utils/index";
import axios from "axios";
import APICore from "@/api/core";
export default {
  name: "",
  data() {
    return {
      pieRightList: [
        /*  {
                    text: "无情绪倾向",
                    count: 12,
                    percentage: "80",
                    color: "#62BD48"
                },
                {
                    text: "轻度情绪倾向",
                    count: 2,
                    percentage: "80",
                    color: "#ffde00"
                },
                {
                    text: "中度情绪倾向",
                    count: 1,
                    percentage: "80",
                    color: "#ff8a00"
                },
                {
                    text: "重度情绪倾向",
                    count: 1,
                    percentage: "80",
                    color: "#d70d0d"
                } */
      ],
      statisticsList: [
        /*  { label: "最大值", value: "75", time: "08:15" },
                { label: "最小值", value: "40", time: "10:15" },
                { label: "最近值", value: "50", time: "18:15" } */
      ],
      emotionList: [],
      surveyTitle: "本周概览",
      echarts: null,
      // 路由传过来的情绪参数
      emoName: "",
      pieData: [],
      xAxisData: [],
      pieEcharts: null,
      monitoringCount: "",
      // 7天和30天最大数据列表
      weekAndMonData: [],
      defaultSeries: null,
      defaultLegend: [
        {
          name: `轻度${this.emoName}倾向`,
          icon: "rect",
          itemStyle: {
            color: "#ffde00",
          },
          textStyle: {
            fontSize: 12,
          },
        },
        {
          name: `中度${this.emoName}倾向`,
          itemStyle: {
            color: "#ff8a00",
          },
          icon: "rect",
          textStyle: {
            fontSize: 12,
          },
        },
        {
          name: `重度${this.emoName}倾向`,
          itemStyle: {
            color: "#d70d0d",
          },
          icon: "rect",
          textStyle: {
            fontSize: 12,
          },
        },
        {
          name: `无${this.emoName}倾向`,
          icon: "rect",
          itemStyle: {
            color: "#62BD48",
          },
          textStyle: {
            // 项目遗留问题，新项目不需重新转换文字大小
            fontSize: 12,
          },
        },
      ],
      params: {},
      weekResult: {},
      upImg: require("@/assets/img/psychological/up.png"),
      downImg: require("@/assets/img/psychological/down.png"),
      isShowCompare: null, //是否显示周对比
    };
  },
  created() {
    this.initEchartText();
  },
  mounted() {
    this.loadParams();
    this.initEchart();
  },
  watch: {
    // 监听数据发生变化 初始化各项图表
    emotionData: {
      handler(n, o) {
        this.initEchart();
      },
      deep: true,
    },
    xAxisData: {
      handler(n, o) {
        this.initEchart();
      },
      deep: true,
    },
    pieData: {
      handler(n, o) {
        this.initPieEchart();
      },
      deep: true,
    },
  },
  computed: {
    isShowLeft() {
      return this.params.isShowLeft || this.params.isShowLeft === 'true'
    },
    // 折线图标题
    echartsTitle() {
      return `${this.emoName}数据图`;
    },
    defaultOptions() {
      return {
        time: {
          useUTC: false,
        },
        title: {
          text: this.echartsTitle,
          left: 1,
          right: 25,
          bottom: 20,
          top: "3%",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold",
          },
        },
        legend: {
          width: "65%",
          orient: "horizontal",
          right: "5%",
          top: "3%",
          bottom: "1%",
          itemHeight: 12,
          itemWidth: 12,
          itemGap: 10,
          align: "left",
          selectedMode: false,
          data: [
            {
              name: `无${this.emoName}倾向`,
              icon: "rect",
              itemStyle: {
                color: "#62BD48",
              },
              textStyle: {
                fontSize: 12,
              },
            },
            {
              name: `轻度${this.emoName}倾向`,
              icon: "rect",
              itemStyle: {
                color: "#ffde00",
              },
              textStyle: {
                fontSize: 12,
              },
            },
            {
              name: `中度${this.emoName}倾向`,
              itemStyle: {
                color: "#ff8a00",
              },
              icon: "rect",
              textStyle: {
                fontSize: 12,
              },
            },
            {
              name: `重度${this.emoName}倾向`,
              itemStyle: {
                color: "#d70d0d",
              },
              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: "5%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          textStyle: {
            fontSize: 10,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
              width: 2,
            },
          },
          nameLocation: "center",
          axisLabel: {
            show: true,
            fontSize: 12,
            showMinLabel: true, //显示最小值
            showMaxLabel: true, //显示最大值
          },
          data: this.xAxisData,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
            textStyle: {
              color: "#FFF",
              fontSize: 14,
            },
            show: true,
            height: 25,
            bottom: "3%",
            handleStyle: {
              borderWidth: 1,
              borderCap: "square",
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 14,
            align: "center",
          },
          formatter: function (params) {
            return (
              params[0].marker +
              params[0].name +
              "--" +
              params[0].value +
              "</br>"
            );
          },
        },
        yAxis: {
          type: "value",
          max: 100,
          min: 0,
          interval: 20,
          splitNumber: 1,
          boundaryGap: ["5%", "5%"],
          nameTextStyle: {
            fontSize: 13,
          },
          alignTicks: true,
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            fontSize: 13,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
              width: 1,
            },
          },
        },
        series: [
          {
            name: `无${this.emoName}倾向`,
            type: "line",
            padding: 5,
            data: this.emotionData,
            symbol: "circle",
            symbolSize: 8,
          },
          {
            name: `轻度${this.emoName}倾向`,
            type: "line",
            data: "",
          },
          {
            name: `中度${this.emoName}倾向`,
            type: "line",
            data: "",
          },
          {
            name: `重度${this.emoName}倾向`,
            type: "line",
            data: "",
          },
        ],
      };
    },
    // 饼状图配置
    pieOption() {
      return {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 14,
          },
          position: "right",
        },
        legend: {
          top: "5%",
          left: "center",
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            startAngle: 270, // 设置逆时针渲染
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
              fontSize: 16,
            },
            label: {
              show: false,
              position: "center",
              fontSize: 16,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieData,
          },
        ],
      };
    },
  },
  methods: {
    calcWeekImg(cur, last, callBackText) {
      let imgurl = "";
      let text = "";
      if (isNotNull(cur) && isNotNull(last) && this.weekAndMonData.length > 0) {
        let curNumber = Number(cur);
        let latNumber = Number(last);
        if (curNumber - latNumber == 0) {
          text = "持平";
        } else {
          imgurl = curNumber < latNumber ? this.downImg : this.upImg;
          text = Math.abs(curNumber - latNumber) + "天";
        }
        if (callBackText) {
          return text;
        } else {
          return imgurl;
        }
      }
    },
    // 计算显示是上升or下降的图片
    /**
     *
     * @param { 本周情绪比例} current
     * @param { 上周情绪比例 } last
     * @param { 是否返回对比比例 } isCallBackCompare
     */
    calcImg(current, last, isCallBackCompare) {
      let imgUrl = "";
      let compare = "";
      if (isNotNull(current) && isNotNull(last)) {
        compare = Number(current) - Number(last);
        imgUrl = compare > 0 ? this.upImg : compare == 0 ? "" : this.downImg;
      }
      if (isCallBackCompare) {
        return compare;
      } else {
        return imgUrl;
      }
    },
    async loadParams() {
      let params = this.$route.query;
      if (params) {
        this.params = { ...params };
        if (params.appType) {
          this.$store.commit("appType", params.appType);
        }
        if (!params.accessToken) {
          let authToken = await this.getAuth();
          this.$store.commit("ssjlToken", authToken);
        } else {
          this.$store.commit("ssjlToken", params.accessToken);
        }
        this.getWeekResultDetail();
      }
    },
    //   获取b端token
    getAuth() {
      let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
      let that = this;
      return new Promise((resolve, reject) => {
        APICore.getAuth({ manufactorId: manufactorId }).then((res) => {
          let data = res.data;
          if (data.code === 0) {
            resolve(res.data.data);
          } else {
            this.$toast.fail(`${data.message}`);
            reject("");
          }
        });
      });
    },
    initEchartText() {
      this.defaultSeries = [
        {
          name: ``,
          type: "line",
          padding: 5,
          data: this.emotionData,
          symbol: "circle",
          symbolSize: 8, // 拐点圆的大小
          areaStyle: {},
        },
        {
          name: `轻度${this.emoName}倾向`,
          type: "line",
          padding: 10,
          data: "",
          symbol: "circle",
          symbolSize: 8, // 拐点圆的大小
        },
        {
          name: `中度${this.emoName}倾向`,
          type: "line",
          data: "",
        },
        {
          name: `重度${this.emoName}倾向`,
          type: "line",
          data: "",
        },
      ];
    },
    calcTitle(type) {
      let title = "";
      switch (type) {
        case 1:
          title = "压力";
          break;
        case 2:
          title = anxietyText;
          break;
        case 3:
          title = "疲劳";
          break;
        default:
          break;
      }
      return title;
    },
    getWeekResultDetail() {
      this.$toast.loading("数据加载中");
      let baseUrl =
        process.env.NODE_ENV === "production"
          ? "https://dbmq.rzliot.com/auth_heart"
          : "https://dbmq.rzliot.com/heart";
      let reqUrl = `${baseUrl}/api/Data/GetWeekResultDetail`;
      let reqParams = {
        recordId: this.params.recordId,
      };
      axios
        .get(reqUrl, {
          params: { ...reqParams },
          /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
        })
        .then((res) => {
          const data = res.data.response;
          let chartData = data.ChartData
            ? JSON.parse(data.ChartData).filter((item) => {
              return item.Key;
            })
            : [];
          console.log("chartData", chartData);
          if (data) {
            this.monitoringCount = data.Total;
            this.pieRightList = [];
            this.statisticsList = [];
            this.emotionList = [];
            this.weekResult = data;
            this.weekResult.Explain = this.$replaceAll(data.Explain, '抑郁', '忧郁')
            this.weekResult.Summary = this.$replaceAll(data.Summary, '抑郁', '忧郁')
            this.weekResult.Advice = this.$replaceAll(data.Advice, '抑郁', '忧郁')
            this.emoName = this.calcTitle(data.Type);
            this.isShowCompare = data.LastweekData;
          }
          let None = {
            count: data.None,
            percentage: this.calcPercentage(data.None, data.Total),
            text: `无${this.emoName}倾向`,
            color: "#62BD48",
            scale: data.NoneRatio,
            lastPercentage: this.calcPercentage(data.LastNone, data.LastTotal),
          };
          let Mild = {
            count: data.Mild,
            percentage: this.calcPercentage(data.Mild, data.Total),
            text: `轻度${this.emoName}倾向`,
            color: "#ffde00",
            scale: data.MildRatio,
            lastPercentage: this.calcPercentage(data.LastMild, data.LastTotal),
          };
          let Moderate = {
            count: data.Moderate,
            percentage: this.calcPercentage(data.Moderate, data.Total),
            text: `中度${this.emoName}倾向`,
            color: "#ff8a00",
            scale: data.ModerateRatio,
            lastPercentage: this.calcPercentage(
              data.LastModerate,
              data.LastTotal
            ),
          };
          let Severe = {
            count: data.Severe,
            percentage: this.calcPercentage(data.Severe, data.Total),
            text: `重度${this.emoName}倾向`,
            color: "#d70d0d",
            scale: data.SevereRatio,
            lastPercentage: this.calcPercentage(
              data.LastSevere,
              data.LastTotal
            ),
          };
          // 饼状图右边数据
          this.pieRightList.push(None);
          this.pieRightList.push(Mild);
          this.pieRightList.push(Moderate);
          this.pieRightList.push(Severe);
          this.pieData = this.pieRightList.map((item) => {
            item.value = item.count;
            item.itemStyle = {
              color: item.color,
            };
            return item;
          });
          let Max = {
            label: "最大值",
            value: data.Max,
            time: data.MaxDesc
              ? this.currentDays === 0
                ? this.$dayjs(data.MaxDesc).format("HH:mm")
                : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm")
              : "",
            level: data.MaxLevel
          };
          let Min = {
            label: "最小值",
            value: data.Min,
            time: data.MinDesc
              ? this.currentDays === 0
                ? this.$dayjs(data.MinDesc).format("HH:mm")
                : this.$dayjs(data.MinDesc).format("MM/DD HH:mm")
              : "",
            level: data.MinLevel
          };
          let Avg = {
            label: "平均值",
            value: data.Avg,
            time: data.AvgDesc
              ? this.currentDays === 0
                ? this.$dayjs(data.AvgDesc).format("HH:mm")
                : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm")
              : "",
            level: data.AvgLevel
          };
          this.statisticsList.push(Max);
          this.statisticsList.push(Min);
          this.statisticsList.push(Avg);
          let NoneDay = {
            days: data.NoneDay,
            text: `无${this.emoName}倾向`,
            color: "#62BD48",
            lastDay: data.LastNoneDay,
            scale: data.NoneDayRatio,
          };
          let MildDay = {
            days: data.MildDay,
            text: `轻度${this.emoName}倾向`,
            color: "#ffde00",
            lastDay: data.LastMildDay,
            scale: data.MildDayRatio,
          };
          let ModerateDay = {
            days: data.ModerateDay,
            text: `中度${this.emoName}倾向`,
            color: "#ff8a00",
            lastDay: data.LastModerateDay,
            scale: data.ModerateDayRatio,
          };
          let SevereDay = {
            days: data.SevereDay,
            text: `重度${this.emoName}倾向`,
            color: "#d70d0d",
            lastDay: data.LastSevereDay,
            scale: data.SevereDayRatio,
          };
          this.emotionList.push(NoneDay);
          this.emotionList.push(MildDay);
          this.emotionList.push(ModerateDay);
          this.emotionList.push(SevereDay);
          // 图表数据
          this.emotionData = chartData.map(item => {
            return {
              value: item.Value,
              itemStyle: {
                color: this.calcResultColor(item.Level),
              },
            };
          });
          console.log("emotionData", this.emotionData);
          this.weekAndMonData = chartData.map((item, index) => {
            return {
              value: [index, item.MinValue, item.MaxValue],
            };
          });
          this.xAxisData = chartData.map((item) => {
            return item.Key
              ? this.$dayjs(item.Key.replace(/-/g, "/")).format("MM/DD")
              : item.key;
          });
          let emphasisStyle = {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(0,0,0,0.3)",
            },
          };
          let that = this;
          // 7天和30天变成柱状图
          this.weekAndMonthSeries = [
            {
              name: "平均值",
              type: "scatter",
              symbolSize: 8,
              data: this.emotionData,
            },
            {
              name: "",
              type: "custom",
              data: this.weekAndMonData,
              renderItem: function (params, api) {
                var categoryIndex = api.value(0);
                var end = api.coord([categoryIndex, api.value(1)]);
                var start = api.coord([categoryIndex, api.value(2)]);
                var width = 8;
                var rectShape = that.$echarts.graphic.clipRectByRect(
                  {
                    x: start[0] - width / 2,
                    y: start[1],
                    width: 8,
                    height: end[1] - start[1],
                  },
                  {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height,
                  }
                );
                if (rectShape) {
                  rectShape.r = [10];
                }
                return (
                  rectShape && {
                    type: "rect",
                    shape: rectShape,
                    style: api.style(),
                  }
                );
              },
              itemStyle: {
                opacity: 0.8,
              },
              encode: {
                y: [1, 2],
                x: 0,
              },
            },
            {
              name: `轻度${this.emoName}倾向`,
              type: "scatter",
              symbolSize: 8,
              data: "",
            },
            {
              name: `中度${this.emoName}倾向`,
              type: "scatter",
              symbolSize: 8,
              data: "",
            },
            {
              name: `重度${this.emoName}倾向`,
              type: "scatter",
              symbolSize: 8,
              data: "",
            },
            {
              name: `无${this.emoName}倾向`,
              type: "scatter",
              symbolSize: 8,
              data: "",
            },
          ];
          // 点击提示此时为空
          this.defaultOptions.tooltip = {
            trigger: "axis",
            formatter: function (params) {
              if (params) {
                return (
                  params[0].marker +
                  "平均值:" +
                  params[0].name +
                  "--" +
                  params[0].value +
                  "</br>" +
                  params[1].marker +
                  "最大值:" +
                  params[1].name +
                  "--" +
                  params[1].value[2] +
                  "</br>" +
                  params[1].marker +
                  "最小值:" +
                  params[1].name +
                  "--" +
                  params[1].value[1]
                );
              }
            },
          };
          this.defaultOptions.series = this.weekAndMonthSeries;
          this.$toast.success("数据加载完成");
        });
    },
    initEchart() {
      if (
        this.echarts != null &&
        this.echarts != "" &&
        this.echarts != undefined
      ) {
        this.echarts.dispose();
      }
      this.echarts = this.$echarts.init(this.$refs.charts);
      this.echarts.setOption(this.defaultOptions);
    },
    // 初始化饼状图
    initPieEchart() {
      if (
        this.pieEcharts != null &&
        this.pieEcharts != "" &&
        this.pieEcharts != undefined
      ) {
        this.pieEcharts.dispose();
      }
      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
      this.pieEcharts.setOption(this.pieOption);
    },
    onNavBack() {
      this.$router.push({
        name: "psychological",
        query: {
          uid: this.params.uid,
          name: this.params.name,
        },
      });
    },
    // 计算字体显示的颜色
    calcColor(value) {
      let color = "";
      if (value <= 40) {
        color = "#62BD48";
      } else if (value > 40 && value <= 65) {
        color = "#ffde00";
      } else if (value > 65 && value <= 80) {
        color = "#ff8a00";
      } else if (value > 80) {
        color = "#d70d0d";
      } else {
        color = "";
      }
      return color;
    },
    // 计算百分比
    calcPercentage(value, total) {
      if (
        typeof value !== "number" ||
        typeof total !== "number" ||
        total === 0
      ) {
        return 0;
      }
      let milValue = value * 1000;
      let milTotal = total * 1000;
      return Math.round((milValue / milTotal) * 100);
    },
    // 计算结果采用哪种颜色
    calcResultColor(value, isCallBackClass) {
      let color = "";
      let className = "";
      switch (Number(value)) {
        case 0:
          color = "#62BD48";
          className = "none";
          break;
        case 1:
          color = "#ffde00";
          className = "mild";
          break;
        case 2:
          color = "#ff8a00";
          className = "moderate";
          break;
        case 3:
          color = "#d70d0d";
          className = "severe";
          break;
      }
      return isCallBackClass ? className : color;
    },
    // 重新拼接日期
    resetDate(startDate, endDate) {
      let callBackDate = "";
      if (startDate && endDate) {
        callBackDate =
          startDate.replace(/-/g, ".") +
          "-" +
          endDate.slice(5, endDate.length).replace(/-/g, ".");
      }
      return callBackDate;
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
