web_dist/src/components/medical-advice/temperature/graphics.vue

<template>
  <div class="table_wrap">
    <div
      :key="'comKey' + comKey"
      class="container"
      :style="{
        marginTop: containerStyle.marginTop,
      }"
    >
      <svg width="100%" height="100%"></svg>
    </div>
    <table class="temperatureChart">
      <caption>
        <p style="font-size: 20px; font-weight: bold">
          {{ env.VITE_HOSPITAL_NAME }}
        </p>
        <p style="font-size: 20px; font-weight: bold">体温单</p>
        <p style="position: relative; text-align: left">
          <span class="tbale-label">&nbsp;&nbsp;姓名：</span
          ><span style="display: inline-block; width: 75px; text-align: left">{{
            info.name
          }}</span>
          <span class="tbale-label">年龄：</span>
          <span style="display: inline-block; width: 60px; text-align: left">{{
            info.age + "岁"
          }}</span>
          <span class="tbale-label">性别：</span>
          <span style="display: inline-block; width: 60px; text-align: left">{{
            info.sexName
          }}</span>
          <span class="tbale-label">入院日期：</span>
          <span style="display: inline-block; width: 100px; text-align: left">{{
            info.admissDate
          }}</span>
          <span class="tbale-label">科室：</span>
          <span style="display: inline-block; width: 65px; text-align: left">{{
            info.admissWardName
          }}</span>
          <span class="tbale-label">床号：</span>
          <span style="display: inline-block; width: 60px; text-align: left">{{
            info.bedNo
          }}</span>
          <span class="tbale-label">住院号：</span>
          <span style="display: inline-block; width: 100px; text-align: left">{{
            info.inpatientNo
          }}</span>
        </p>
      </caption>

      <thead></thead>
      <tbody>
        <tr>
          <td
            ref="topTd"
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in inHospitalTime"
            :key="index + '|indays'"
          >
            {{
              index === 0
                ? "日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期"
                : item
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in inHospitalDays"
            :key="index + '|inHospitalDays'"
          >
            {{ index === 0 ? "住院天数" : item }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in surgeryDays"
            :key="index + '|surgeryDays'"
          >
            {{ index === 0 ? "手术后天数" : item }}
          </td>
        </tr>
        <tr>
          <td class="table-just" rowspan="2" colspan="8">
            时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间
          </td>
        </tr>
        <!-- 已屏蔽，保留以备后用 - 旧的时间显示代码 -->
        <tr>
          <!-- <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText">23</td>           -->
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText redLineTd">22</td>
          <td class="focusText">2</td>
          <td>6</td>
          <td>10</td>
          <td>14</td>
          <td class="focusText">18</td>
          <td class="focusText">22</td>
        </tr>

        <!-- <record></record> -->
        <tr class="recorde temperature_mark">
          <td colspan="2" rowspan="45" style="border-right: 1px solid white">
            <div :style="{ marginTop: legendStyle.marginTop, height: '31px' }">
              <p style="width: 35px">
                <span>口表•</span>
                <span style="color: blue">腋表x</span>
                <span>肛表o</span>
                <span style="color: red">脉搏•</span>
                <span style="color: red">心率o</span>
              </p>
              <p></p>
            </div>
          </td>
          <td colspan="3" rowspan="45">
            <div style="color: red" class="num_wrapper">
              <p :style="{ marginTop: pulseScaleStyle.titleMarginTop, textAlign: 'right' }">脉搏次/分</p>
              <p :style="{ marginTop: pulseScaleStyle.firstRowMarginTop }">180</p>
              <p :style="{ marginTop: pulseScaleStyle.normalRowMarginTop }">160</p>
              <p :style="{ marginTop: pulseScaleStyle.normalRowMarginTop }">140</p>
              <p :style="{ marginTop: pulseScaleStyle.normalRowMarginTop }">120</p>
              <p :style="{ marginTop: pulseScaleStyle.normalRowMarginTop }">100</p>
              <p :style="{ marginTop: pulseScaleStyle.normalRowMarginTop }">80</p>
              <p :style="{ marginTop: pulseScaleStyle.lastRowMarginTop }">60</p>
              <p :style="{ marginTop: pulseScaleStyle.lastRowMarginTop }">40</p>
            </div>
          </td>
          <td colspan="3" rowspan="45">
            <div style="color: blue" class="num_wrapper">
              <p :style="{ marginTop: temperatureScaleStyle.titleMarginTop }">体温<br />x</p>
              <p :style="{ marginTop: temperatureScaleStyle.firstRowMarginTop }">41</p>
              <p :style="{ marginTop: temperatureScaleStyle.normalRowMarginTop }">40</p>
              <p :style="{ marginTop: temperatureScaleStyle.normalRowMarginTop }">39</p>
              <p :style="{ marginTop: temperatureScaleStyle.normalRowMarginTop }">38</p>
              <p :style="{ marginTop: temperatureScaleStyle.normalRowMarginTop }">37</p>
              <p :style="{ marginTop: temperatureScaleStyle.normalRowMarginTop }">36</p>
              <p :style="{ marginTop: temperatureScaleStyle.lastRowMarginTop }">35</p>
              <p :style="{ marginTop: temperatureScaleStyle.lastRowMarginTop }">34</p>
            </div>
          </td>
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td0'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          >
            <div class="recorde-text" :style="recordeTextStyle">{{ getSymbolTextArr(y) }}</div>
          </td>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0]"
          :key="index + 'tr1'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td1'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td2'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td2'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr2'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td3'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td4'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td4'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr3'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td5'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td6'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td6'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr4'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td7'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td8'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td8'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr5'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td9'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td10'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #ff0000;
              "
            ></td>
            <td
              :key="index + 'td10'"
              v-else
              style="border-bottom: 1px solid #ff0000"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr6'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td11'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td11'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td11'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr7'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td12'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td12'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr8'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td13'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td14'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td14'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0, 0]"
          :key="index + 'tr9'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td15'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr></tr>

        <tr>
          <td
            :colspan="index === 0 ? 8 : 1"
            v-for="(item, index) in array42"
            :class="[index && 'redLineTd']"
            :key="index + '|098'"
          >
            {{
              index === 0
                ? "呼吸(次/分)"
                : typesViewData["098"] && typesViewData["098"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 1"
            v-for="(item, index) in array42"
            :class="[index && 'redLineTd']"
            :key="index + '|099'"
          >
            {{
              index === 0
                ? "疼痛强度"
                : typesViewData["099"] && typesViewData["099"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|005'"
          >
            {{
              index === 0
                ? "大便(次/日)"
                : typesViewData["005"] && typesViewData["005"][index - 1]
            }}
          </td>
        </tr>

        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|004'"
          >
            {{
              index === 0
                ? "小便(ml)"
                : typesViewData["004"] && typesViewData["004"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|008'"
          >
            {{
              index === 0
                ? "血压(mmHg)"
                : typesViewData["008"] && typesViewData["008"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|030'"
          >
            {{
              index === 0
                ? "身高(cm)"
                : typesViewData["030"] && typesViewData["030"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|009'"
          >
            {{
              index === 0
                ? "体重(kg)"
                : typesViewData["009"] && typesViewData["009"][index - 1]
            }}
          </td>
        </tr>

        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|006'"
          >
            {{
              index === 0
                ? "入量"
                : typesViewData["006"] && typesViewData["006"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|011'"
          >
            {{
              index === 0
                ? "出量"
                : typesViewData["011"] && typesViewData["011"][index - 1]
            }}
          </td>
        </tr>

        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|010'"
          >
            {{
              index === 0
                ? "过敏药物"
                : typesViewData["010"] && typesViewData["010"][index - 1]
            }}
          </td>
        </tr>
      </tbody>
    </table>
    <div style="text-align: center">
      <div style="font-size: 20px; font-weight: bold">
        {{ `第${info.pageNo}页` }}
      </div>
    </div>
  </div>
</template>

<script>
import * as d3 from "d3";
import dayjs from "dayjs";
import { getKeyMap, SectionToChinese } from "./utils";
import {
  getChartData,
  getAllPatintInfo,
} from "@/api/medical-advice/nursing-manage";
import { getFormatDatetime } from "@/utils/date";
import env from "../../../utils/setting";

export default {
  props: {
    patientInfo: Object,
    queryParam: Object,
  },
  data() {
    return {
      marginTop: 0,
      keyMap: getKeyMap(),
      info: {
        age: 0,
        beginDate: "",
        inpatientNo: "",
        hospDate: 0,
        admissDate: "",
        bedNo: "",
        inDate: 0,
        inDiagName: null,
        name: "",
        admissWardName: "",
        sexName: "",
        pageNo: "1",
        operaDays: [],
        admissDateTime: null, // 完整的入院时间
      },
      xyList: [],
      typesInfo: [],
      typesViewData: {},
      breathData: [],
      tdList: new Array(42).fill(0),
      comKey: 1,
      symbolTextArr: [],
      array42: [],
      // 动态样式
      recordeTextStyle: {
        width: '12px',
        height: '10px',
        color: '#ff0000',
        fontSize: '8px',
        position: 'relative',
        top: '-1px',
        lineHeight: '14px'
      },
      // 动态刻度样式
      pulseScaleStyle: {
        titleMarginTop: '0px',
        firstRowMarginTop: '32px',
        normalRowMarginTop: '55px',
        lastRowMarginTop: '56px'
      },
      temperatureScaleStyle: {
        titleMarginTop: '0px',
        firstRowMarginTop: '32px',
        normalRowMarginTop: '55px',
        lastRowMarginTop: '56px'
      },
      legendStyle: {
        marginTop: '476px'
      },
      containerStyle: {
        marginTop: '-12px'
      }
    };
  },
  computed: {
    env() {
      return env;
    },
    // 日期
    inHospitalTime() {
      const initday = dayjs(this.info.beginDate);
      return [
        null, // 文案天
        initday.format("YYYY-MM-DD"),
        initday.add(1, "day").format("MM-DD"),
        initday.add(2, "day").format("MM-DD"),
        initday.add(3, "day").format("MM-DD"),
        initday.add(4, "day").format("MM-DD"),
        initday.add(5, "day").format("MM-DD"),
        initday.add(6, "day").format("MM-DD"),
      ];
    },
    // 住院天数
    inHospitalDays() {
      const initday = this.info.hospDays || 0;
      return [
        null, // 文案天
        initday + 1,
        initday + 2,
        initday + 3,
        initday + 4,
        initday + 5,
        initday + 6,
        initday + 7,
      ];
    },
    // 手术天数
    surgeryDays() {
      const initday = this.info.operaDays;
      if (initday.length <= 0) {
        return new Array(8).fill(null);
      } else {
        return initday;
      }
    },
  },
  mounted() {
    for (let i = 0; i < 43; i++) {
      this.array42.push(i);
    }
    this.initData();
    // 计算默认marginTop
    const defaultMarginTop =
      (Math.round(this.$refs.topTd[0].getBoundingClientRect().height) - 18) *
        10 +
      28;
    this.marginTop = defaultMarginTop;
    
    // 根据分辨率设置样式
    this.setStyleByResolution();
    
    // setTimeout(() => {
    //   this.$emit('done')
    // })
  },
  methods: {
    SectionToChinese,
    // 将时间转换为中文格式
    convertTimeToChinese(hour, minute) {
      // 参考 Java 版本的 numberToChinese 方法，创建专门的时间转换函数
      const numberToChinese = (number) => {
        if (number === 0) return "零";
        if (number === 1) return "一";
        if (number === 2) return "二";
        if (number === 3) return "三";
        if (number === 4) return "四";
        if (number === 5) return "五";
        if (number === 6) return "六";
        if (number === 7) return "七";
        if (number === 8) return "八";
        if (number === 9) return "九";
        if (number === 10) return "十";
        if (number === 11) return "十一";
        if (number === 12) return "十二";
        if (number === 13) return "十三";
        if (number === 14) return "十四";
        if (number === 15) return "十五";
        if (number === 16) return "十六";
        if (number === 17) return "十七";
        if (number === 18) return "十八";
        if (number === 19) return "十九";
        if (number === 20) return "二十";
        if (number === 21) return "二十一";
        if (number === 22) return "二十二";
        if (number === 23) return "二十三";
        if (number === 24) return "二十四";
        if (number === 25) return "二十五";
        if (number === 26) return "二十六";
        if (number === 27) return "二十七";
        if (number === 28) return "二十八";
        if (number === 29) return "二十九";
        if (number === 30) return "三十";
        if (number === 31) return "三十一";
        if (number === 32) return "三十二";
        if (number === 33) return "三十三";
        if (number === 34) return "三十四";
        if (number === 35) return "三十五";
        if (number === 36) return "三十六";
        if (number === 37) return "三十七";
        if (number === 38) return "三十八";
        if (number === 39) return "三十九";
        if (number === 40) return "四十";
        if (number === 41) return "四十一";
        if (number === 42) return "四十二";
        if (number === 43) return "四十三";
        if (number === 44) return "四十四";
        if (number === 45) return "四十五";
        if (number === 46) return "四十六";
        if (number === 47) return "四十七";
        if (number === 48) return "四十八";
        if (number === 49) return "四十九";
        if (number === 50) return "五十";
        if (number === 51) return "五十一";
        if (number === 52) return "五十二";
        if (number === 53) return "五十三";
        if (number === 54) return "五十四";
        if (number === 55) return "五十五";
        if (number === 56) return "五十六";
        if (number === 57) return "五十七";
        if (number === 58) return "五十八";
        if (number === 59) return "五十九";
        
        // 对于其他数字，使用通用的转换逻辑
        if (number < 10) {
          return numberToChinese(number);
        } else if (number < 20) {
          return "十" + (number === 10 ? "" : numberToChinese(number - 10));
        } else if (number < 60) {
          const tens = Math.floor(number / 10);
          const ones = number % 10;
          let tensStr = "";
          switch (tens) {
            case 2: tensStr = "二十"; break;
            case 3: tensStr = "三十"; break;
            case 4: tensStr = "四十"; break;
            case 5: tensStr = "五十"; break;
          }
          return tensStr + (ones === 0 ? "" : numberToChinese(ones));
        }
        
        return String(number);
      };
      
      const hourStr = numberToChinese(hour);
      const minuteStr = numberToChinese(minute);
      
      // 处理分钟为0的情况
      if (minute === 0) {
        return `${hourStr}时`;
      }
      
      // 处理分钟小于10的情况，需要加"零"
      if (minute < 10) {
        return `${hourStr}时零${minuteStr}分`;
      }
      
      return `${hourStr}时${minuteStr}分`;
    },
    
    // 生成入院标识文字
    generateAdmissionText(admissionDateTime) {
      if (!admissionDateTime) return "";
      
      const date = new Date(admissionDateTime);
      const hour = date.getHours();
      const minute = date.getMinutes();
      
      return `入院时间${this.convertTimeToChinese(hour, minute)}`;
    },
    
    // 获取入院时间应该显示的时间段索引
    getAdmissionTimeSlot(admissionDateTime) {
      if (!admissionDateTime) return -1;
      
      const date = new Date(admissionDateTime);
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      
      // 将时间转换为分钟数，便于精确计算
      const totalMinutes = hour * 60 + minute + second / 60;
      
      // 标准时间点：02:00, 06:00, 10:00, 14:00, 18:00, 22:00
      const standardMinutes = [2 * 60, 6 * 60, 10 * 60, 14 * 60, 18 * 60, 22 * 60];
      
      // 计算到每个标准时间点的距离，选择最近的
      let minDistance = Infinity;
      let closestIndex = -1;
      
      for (let i = 0; i < standardMinutes.length; i++) {
        const standardMinute = standardMinutes[i];
        let distance;
        
        // 计算距离，考虑跨天的情况
        if (Math.abs(totalMinutes - standardMinute) <= 12 * 60) {
          // 同一天内或相邻天的情况
          distance = Math.abs(totalMinutes - standardMinute);
        } else {
          // 跨天的情况，需要计算最短距离
          if (totalMinutes > standardMinute) {
            // 例如：23点到02点
            distance = Math.min(totalMinutes - standardMinute, (24 * 60 - totalMinutes) + standardMinute);
          } else {
            // 例如：1点到22点
            distance = Math.min(standardMinute - totalMinutes, (24 * 60 - standardMinute) + totalMinutes);
          }
        }
        
        // 更新最小距离和对应的索引
        if (distance < minDistance) {
          minDistance = distance;
          closestIndex = i;
        }
      }
      
      return closestIndex;
    },
    
    getSymbolTextArr(index) {
      // 检查是否是入院时间对应的位置
      if (this.info.admissDateTime) {
        // 计算入院时间对应的日期索引
        const admissionDate = new Date(this.info.admissDateTime);
        const currentDate = dayjs(this.info.beginDate).add(Math.floor(index / 6), 'day');
        
        // 判断是否是入院当天
        if (dayjs(admissionDate).format('YYYY-MM-DD') === currentDate.format('YYYY-MM-DD')) {
          // 判断是否是入院时间段
          const admissionSlot = this.getAdmissionTimeSlot(this.info.admissDateTime);
          if (admissionSlot === (index % 6)) {
            return this.generateAdmissionText(this.info.admissDateTime);
          }
        }
      }
      
      // 原有的特殊标注文字逻辑
      const current = this.symbolTextArr.find(i => i.x === index);
      if (current) {
        return current.y;
      } else {
        return "";
      }
    },
    temperatureConverter(c) {
      const value = (c * 9) / 5 + 32;
      return value.toFixed(1);
    },
    initData() {
      // this.info = dataModel.grParamBOS
      this.info.pageNo = this.queryParam.week;
      this.info.beginDate = this.queryParam.startRecTime;
      this.info.hospDays = (Number(this.queryParam.week) - 1) * 7;
      // this.rowsInfo = dataModel.rows || []
      // this.typesInfo = dataModel.types || []
      let param = {
        inpatientNo: this.patientInfo.inpatientNo,
        admissTimes: this.patientInfo.admissTimes,
        week: this.queryParam.week,
        startRecTime: this.queryParam.startRecTime,
        endRecTime: this.queryParam.endRecTime,
        mbFlag: this.queryParam.checkBoxFlag.mbFlag,
        hxFlag: this.queryParam.checkBoxFlag.hxFlag,
        xyFlag: this.queryParam.checkBoxFlag.xyFlag,
        wcyRqFlag: this.queryParam.checkBoxFlag.wcyRqFlag,
      };
      getAllPatintInfo({
        inpatientNo: this.patientInfo.inpatientNo,
        admissTimes: this.patientInfo.admissTimes,
      }).then(res => {
        this.info.name = res.name;
        this.info.age = res.age || "";
        this.info.sexName = res.sexName;
        this.info.bedNo = res.bedNo;
        this.info.inpatientNo = res.inpatientNo;
        this.info.admissWardName = res.admissWardName;
        this.info.admissDate = getFormatDatetime(res.admissDate, "YYYY-MM-DD");
        // 保存完整的入院时间用于生成入院标识
        this.info.admissDateTime = res.admissDate;
      });

      getChartData(param).then(res => {
        this.rowsInfo = res.rows;
        this.typesInfo = res.types;
        this.info.operaDays = res.operaDays;
        this.init();
      });
    },
    init() {
      //800 758
      var width = 690;
      var height = 682;
      // SVG画布边缘与图表内容的距离
      var padding = { top: 50, right: 0, bottom: 50, left: 50 };
      // 创建一个分组用来组合要画的图表元素
      var main = d3
        .select(".container svg")
        .append("g")
        .classed("main", true)
        .attr("transform", "translate(" + 80 + "," + 80 + ")");
      // 模拟数据 体温
      var dataset = getTypeData("003", this.rowsInfo);
      var datasetAnus = getTypeData("015", this.rowsInfo);
      var datasetHeartrate = getTypeData("014", this.rowsInfo);
      var datasetPulse = getTypeData("002", this.rowsInfo);
      var symbolTextArr = getTypeData("012", this.rowsInfo, false);
      this.symbolTextArr = symbolTextArr;
      // 口表【黑实圆】
      var datasetPain = getTypeData("001", this.rowsInfo);
      this.breathData = datasetPain;
      // const circleNode = document.createElement('circle')
      // circleNode.setAttribute('cx', '179.2439024390244')
      // circleNode.setAttribute('cy', '582')
      // circleNode.setAttribute('r', '4')
      // circleNode.setAttribute('stroke', '#000000')
      // circleNode.setAttribute('stroke-width', '1')
      // circleNode.setAttribute('fill', '#FFFFFF')
      // document.querySelector('.main').appendChild(circleNode)
      // 创建x轴的比例尺(线性比例尺)
      var xScale = d3
        .scaleLinear()
        .domain([0, 41])
        .range([9, width - padding.left - padding.right + 75]);
      // 创建y轴的比例尺(线性比例尺)

      /* var yScale = d3.scale.linear()
                        .domain([0, d3.max(dataset,function(d) {
                            return d.y;
                        })])
                        .range([height - padding.top - padding.bottom, 0]); */
      // 体温
      var yScale = d3
        .scaleLinear()
        .domain([33, 42])
        .range([height - padding.top - padding.bottom, -56]);
      // 脉搏
      var yScale1 = d3
        .scaleLinear()
        .domain([20, 200])
        .range([height - padding.top - padding.bottom, -55]);
      // 呼吸
      var yScale2 = d3
        .scaleLinear()
        .domain([0, 40])
        .range([height - padding.top + 22, -55]);

      // 创建x轴
      var xAxis = d3.axisBottom().scale(xScale);
      // 创建y轴
      var yAxis = d3.axisLeft().scale(yScale);
      var yAxis1 = d3.axisLeft().scale(yScale1);
      var yAxis2 = d3.axisLeft().scale(yScale2);

      // 添加SVG元素并与x轴进行“绑定”
      main
        .append("g")
        .attr("class", "axis")
        .attr(
          "transform",
          "translate(0," + (height - padding.top - padding.bottom) + ")"
        )
        .call(xAxis);

      // 添加SVG元素并与y轴进行“绑定”
      main.append("g").attr("class", "axis").call(yAxis);
      main.append("g").attr("class", "axis").call(yAxis1);
      main.append("g").attr("class", "axis").call(yAxis2);

      // 添加折线
      var line = d3
        .line()
        .x(function (d) {
          return xScale(d.x);
        })
        .y(function (d) {
          return yScale(d.y);
        });
      var line1 = d3
        .line()
        .x(function (d) {
          return xScale(d.x);
        })
        .y(function (d) {
          return yScale1(d.y);
        });
      var line2 = d3
        .line()
        .x(function (d) {
          return xScale(d.x);
        })
        .y(function (d) {
          return yScale(d.y);
        });
      // .interpolate('linear')
      // 选择线条的类型

      // 添加path元素，并通过line()计算出值来赋值
      main
        .append("path")
        .attr("class", "line tiwenline")
        .attr("d", line(dataset));
      main.append("path").attr("class", "line").attr("d", line(datasetAnus));
      main.append("path").attr("class", "line").attr("d", line2(datasetPain));
      main
        .append("path")
        .attr("class", "line redColor")
        .attr("d", line1(datasetHeartrate));
      main
        .append("path")
        .attr("class", "line redColor")
        .attr("d", line1(datasetPulse));
      // main.append('path').attr('class', 'line').attr('d', line3(dataset))

      // 添加点

      /* 黑实圆--start */
      // main
      //   .selectAll('rect')
      //   .data(dataset_mouth)
      //   .enter()
      //   .append('circle')
      //   .attr('cx', function (d) {
      //     return xScale(d.x)
      //   })
      //   .attr('cy', function (d) {
      //     return yScale(d.y)
      //   })
      //   .attr('r', 4)
      //   .attr('fill', function (d, i) {
      //     return 'black'
      //   })
      /* 黑实圆--end */

      /* 黑空圆--start */
      main
        .selectAll("rect")
        .data(datasetAnus)
        .enter()
        .append("circle")
        .attr("cx", function (d) {
          return xScale(d.x);
        })
        .attr("cy", function (d) {
          return yScale(d.y);
        })
        .attr("r", 4)
        .attr("stroke", "#000000")
        .attr("stroke-width", 1)
        .attr("fill", "#FFFFFF");
      /* 黑空圆--end */

      /* 红空圆--start */
      main
        .selectAll("rect")
        .data(datasetHeartrate)
        .enter()
        .append("circle")
        .attr("cx", function (d) {
          return xScale(d.x);
        })
        .attr("cy", function (d) {
          return yScale1(d.y);
        })
        .attr("r", 4)
        .attr("stroke", "#EE0000")
        .attr("stroke-width", 1)
        .attr("fill", "#FFFFFF");
      /* 红空圆--end */

      /* 红实圆--start */
      main
        .selectAll("rect")
        .data(datasetPulse)
        .enter()
        .append("circle")
        .attr("cx", function (d) {
          return xScale(d.x);
        })
        .attr("cy", function (d) {
          return yScale1(d.y);
        })
        .attr("r", 4)
        .attr("fill", "#EE0000");
      // .on('mouseover', function (d) {
      //   // (1)取得提示显示的位置
      //   var xPosition = parseFloat(d3.select(this).attr('cx')) + 698
      //   var yPosition = parseFloat(d3.select(this).attr('cy')) + 24
      //
      //   // (2)创建提示条SVG
      //   d3.select('.container svg')
      //     .append('text')
      //     .attr('id', 'tooltip') // 设置id便于移除提示
      //     .attr('x', xPosition)
      //     .attr('y', yPosition)
      //     .attr('text-anchor', 'middle')
      //     .attr('font-family', 'sans-setif')
      //     .attr('font-size', '11px')
      //     .attr('font-weight', 'bold')
      //     .attr('fill', 'white')
      //     .text(d.value)
      // })
      // (3)移除提示条SVG

      /* 红实圆--end */
      /* 黑实圆--start */
      main
        .selectAll("rect")
        .data(datasetPain)
        .enter()
        .append("circle")
        .attr("cx", function (d) {
          return xScale(d.x);
        })
        .attr("cy", function (d) {
          return yScale(d.y);
        })
        .attr("r", 4)
        .attr("stroke", "#000000")
        .attr("fill", "#000000");
      /* 黑实圆--end */
      this.drawx(main, dataset, xScale, yScale);
      this.initTypes();
      // this.hoverEvent(main)
    },
    drawx(main, dataset, xScale, yScale) {
      /* 【叉形】--start */
      main
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("line")
        .attr("x1", function (d) {
          return xScale(d.x) - 4;
        })
        .attr("y1", function (d) {
          return yScale(d.y) - 4;
        })
        .attr("x2", function (d) {
          return xScale(d.x) + 4;
        })
        .attr("y2", function (d) {
          return yScale(d.y) + 4;
        })
        .attr("stroke", function (d, i) {
          return "blue";
        });

      main
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("line")
        .attr("x1", function (d) {
          return xScale(d.x) + 4;
        })
        .attr("y1", function (d) {
          return yScale(d.y) - 4;
        })
        .attr("x2", function (d) {
          return xScale(d.x) - 4;
        })
        .attr("y2", function (d) {
          return yScale(d.y) + 4;
        })
        .attr("stroke", function (d, i) {
          return "blue";
        });
      /* 体温【叉形】--end */
    },
    hoverEvent(main) {
      ///* 鼠标悬停直线--start
      //         var dataset_line = [{x: 0,y: 0}]
      //         main.selectAll('rect')
      //           .data(dataset_line)
      //           .enter()
      //           .append('line')
      //           .attr({
      //             'x1':100,'y1':-56,
      //             'x2':100,'y2':582
      //           })
      //           .attr('stroke', function(d, i) {
      //             return 'black';
      //           });
      //  鼠标悬停直线--end */
      document.querySelector(".lineColor").style.stroke = "red";
      const recordeNode = document.createElement("div");
      recordeNode.setAttribute("class", "recorde-text");
      document.querySelector(".recorde td").append(recordeNode);
      const allTrtd = document.querySelectorAll(".temperatureChart tr td");
      [...allTrtd].map(ele => {
        ele.setAttribute("title", ele.innerText);
      });
      /* 鼠标悬停提示框 */
      var tooltip = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0.0);

      main
        .on("mouseover", function (d) {
          /*
                    鼠标移入时，
                    （1）通过 selection.html() 来更改提示框的文字
                    （2）通过更改样式 left 和 top 来设定提示框的位置
                    （3）设定提示框的透明度为1.0（完全不透明）
                    */
          tooltip
            .html("呼吸：19次/分<br/>录入信息：2017-11-02<br/>姓名：张三")
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY + 20 + "px")
            .style("opacity", 1.0);
        })
        .on("mousemove", function (d) {
          /* 鼠标移动时，更改样式 left 和 top 来改变提示框的位置 */
          tooltip
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY + 20 + "px");
        })
        .on("mouseout", function (d) {
          /* 鼠标移出时，将透明度设定为0.0（完全透明） */

          tooltip.style("opacity", 0.0);
        });
    },
    initTypes() {
      const keyMap = {};
      this.typesInfo.map(item => {
        const key = item.typeCode;
        if (keyMap[key]) {
          keyMap[key].push(item.typeValue);
        } else {
          keyMap[key] = [item.typeValue];
        }
      });
      this.typesViewData = keyMap;
    },
     // 根据分辨率设置样式
     setStyleByResolution() {
       const screenWidth = window.screen.width;
       const screenHeight = window.screen.height;
       
       console.log('当前分辨率:', screenWidth + 'x' + screenHeight);
       
       // 默认样式（当前分辨率）
       let style = {
         width: '12px',
         height: '10px',
         color: '#ff0000',
         fontSize: '8px',
         position: 'relative',
         top: '-1px',
         lineHeight: '14px'
       };
       
       // 可以根据不同分辨率设置不同样式
       // 例如：1920x1080
       if (screenWidth === 1920 && screenHeight === 1080) {
         style = {
           width: '12px',
           height: '10px',
           color: '#ff0000',
           fontSize: '8px',
           position: 'relative',
           top: '-1px',
           lineHeight: '14px'
         };
       }
       // 例如：1366x768
       else if (screenWidth === 1366 && screenHeight === 768) {
         style = {
           width: '12px',
           height: '10px',
           color: '#ff0000',
           fontSize: '8px',
           position: 'relative',
           top: '-1px',
           lineHeight: '14px'
         };
       }
       // 例如：1536x864
       else if (screenWidth === 1536 && screenHeight === 864) {
         style = {
           width: '12px',
           height: '10px',
           color: '#ff0000',
           fontSize: '8px',
           position: 'relative',
           top: '-1px',
           lineHeight: '14px'
         };
       }
       // 例如：1360x768
       else if (screenWidth === 1360 && screenHeight === 768) {
         style = {
           width: '12px',
           height: '10px',
           color: '#ff0000',
           fontSize: '8px',
           position: 'relative',
           top: '-1px',
           lineHeight: '14px'
         };
       }
      //  // 例如：1440x900
      //  else if (screenWidth === 1440 && screenHeight === 900) {
      //    style = {
      //      width: '12px',
      //      height: '10px',
      //      color: '#ff0000',
      //      fontSize: '8px',
      //      position: 'relative',
      //      top: '-1px',
      //      lineHeight: '14px'
      //    };
      //  }
       // 其他分辨率使用默认样式
       else {
         style = {
           width: '12px',
           height: '10px',
           color: '#ff0000',
           fontSize: '8px',
           position: 'relative',
           top: '-1px',
           lineHeight: '14px'
         };
       }
       
       this.recordeTextStyle = style;
       
       // 设置刻度样式
       this.setScaleStyles(screenWidth, screenHeight);
    },
    // 设置刻度样式
    setScaleStyles(screenWidth, screenHeight) {
      // 默认刻度样式
      let pulseStyle = {
        titleMarginTop: '0px',
        firstRowMarginTop: '32px',
        normalRowMarginTop: '55px',
        lastRowMarginTop: '56px'
      };
      
      let temperatureStyle = {
        titleMarginTop: '0px',
        firstRowMarginTop: '32px',
        normalRowMarginTop: '55px',
        lastRowMarginTop: '56px'
      };
      
      let legendStyle = {
        marginTop: '476px'
      };
      
      let containerStyle = {
        marginTop: '-12px'
      };
      
      // 可以根据不同分辨率设置不同样式
      // 例如：1920x1080
      if (screenWidth === 1920 && screenHeight === 1080) {
        pulseStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '44px',
          normalRowMarginTop: '61px',
          lastRowMarginTop: '61px'
        };
        temperatureStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '44px',
          normalRowMarginTop: '61px',
          lastRowMarginTop: '61px'
        };
        legendStyle = {
          marginTop: '476px'
        };
        containerStyle = {
          marginTop: '22px'
        };
      }
      // 例如：1366x768
      else if (screenWidth === 1366 && screenHeight === 768) {
        pulseStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '32px',
          normalRowMarginTop: '55px',
          lastRowMarginTop: '56px'
        };
        temperatureStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '32px',
          normalRowMarginTop: '55px',
          lastRowMarginTop: '56px'
        };
        legendStyle = {
          marginTop: '476px'
        };
        containerStyle = {
          marginTop:  (this.marginTop + 10) + 'px',
        };
        console.log("this.marginTop0000000000000000000000",this.marginTop)
        console.log("marginTop.containerStyle",containerStyle.marginTop)
      }
      // 例如：1536x864
      else if (screenWidth === 1536 && screenHeight === 864) {
        pulseStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '40px',
          normalRowMarginTop: '60px',
          lastRowMarginTop: '60px'
        };
        temperatureStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '40px',
          normalRowMarginTop: '60px',
          lastRowMarginTop: '60px'
        };
        legendStyle = {
          marginTop: '476px'
        };
        containerStyle = {
          marginTop: '23px'
        };

      }
      // 例如：1360x768
      else if (screenWidth === 1360 && screenHeight === 768) {
        pulseStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '44px',
          normalRowMarginTop: '61px',
          lastRowMarginTop: '61px'
        };
        temperatureStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '44px',
          normalRowMarginTop: '61px',
          lastRowMarginTop: '61px'
        };
        legendStyle = {
          marginTop: '476px'
        };
        containerStyle = {
          marginTop: '22px'
        };        
      }   
      // // 例如：1440x900
      // else if (screenWidth === 1440 && screenHeight === 900) {
      //   pulseStyle = {
      //     titleMarginTop: '0px',
      //     firstRowMarginTop: '44px',
      //     normalRowMarginTop: '61px',
      //     lastRowMarginTop: '61px'
      //   };
      //   temperatureStyle = {
      //     titleMarginTop: '0px',
      //     firstRowMarginTop: '44px',
      //     normalRowMarginTop: '61px',
      //     lastRowMarginTop: '61px'
      //   };
      //   legendStyle = {
      //     marginTop: '476px'
      //   };
      //   containerStyle = {
      //     marginTop: '22px'
      //   };
      // }            
      // 其他分辨率使用默认样式
      else {
        pulseStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '32px',
          normalRowMarginTop: '55px',
          lastRowMarginTop: '56px'
        };
        temperatureStyle = {
          titleMarginTop: '0px',
          firstRowMarginTop: '32px',
          normalRowMarginTop: '55px',
          lastRowMarginTop: '56px'
        };
        legendStyle = {
          marginTop: '476px'
        };
        containerStyle = {
          marginTop:  this.marginTop + 'px',
        };
      }
      console.log("this.marginTop11111111111111111111",this.marginTop)
      this.pulseScaleStyle = pulseStyle;
      this.temperatureScaleStyle = temperatureStyle;
      this.legendStyle = legendStyle;
      this.containerStyle = containerStyle;
    },
  },
};

function getTypeData(type, allData = [], isNumber = true) {
  return allData
    .map((rowBOSItem, index) => {
      const rowBOS = rowBOSItem.rowBOS;
      const cur =
        rowBOS.find(item => {
          return item.typeCode === type;
        }) || {};
      return { x: index, y: (isNumber ? +cur.typeValue : cur.typeValue) || "" };
    })
    .filter(item => {
      return item.y !== "";
    });
}
</script>

<style scoped>
.table_wrap {
  line-height: normal;
}
table {
  font-weight: normal;
  border-collapse: collapse;
  font-size: 8px;
  text-align: center;
  width: 100%;
  table-layout: fixed;
  border: 2px #2f4f4f solid;
}
td {
  border: 1px solid #ccc;
  width: 12px;
  height: 11px;
}
.redLineTd {
  border-right: 1px solid #ff6e71;
}
.recorde-text {
  /* 样式现在通过动态计算设置 */
  color: #ff0000;
  position: relative;
}
.table_wrap {
  position: relative;
  margin: 0 auto;
  width: 835px;
}
.container {
  /* 高度最好动态计算，不然很容易错位*/

  margin: 30px auto;
  margin-top: 28px;
  width: 805px;
  height: 758px;
  position: absolute;
  top: 142px;
  left: 28px;
}
.temperature_mark td p {
  position: relative;
  top: 0;
  margin-top: 58px;
}
.num_wrapper {
  width: 35px;
  height: 636px;
  position: relative;
}
.pain_wrapper {
  position: absolute;
  width: 100%;
  height: 70px;
  right: 0;
  bottom: -3px;
  border: 1px solid #ccc;
}
.zeroline {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 5 5;
}
.zerolinetext {
  fill: red;
}
.overlay {
  fill: none;
  stroke: none;
  pointer-events: all;
}
.tooltip {
  font-family: "宋体";
  font-size: 10px;
  line-height: 16px;
  color: #736269;
  width: auto;
  height: auto;
  padding: 4px;
  position: absolute;
  text-align: left;
  border: 1px solid #736269;
  background-color: #e7e9f3;
  border-radius: 2px;
  background: linear-gradient(#fefdff, #e5e5f1);
  /* 标准的语法（必须放在最后） */
}
</style>
<style>
.table_wrap {
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.table_wrap .tick,
.table_wrap .domain {
  display: none;
}
.table_wrap .tbale-label {
  font-weight: 700;
}
.table_wrap .focusLine {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
}
.table_wrap .focusText {
  color: red;
}
.table_wrap .breath_td_odd {
  vertical-align: top;
  font-size: 10px;
}
.table_wrap .breath_td_even {
  vertical-align: bottom;
  font-size: 10px;
}
.table_wrap .line {
  fill: none;
  stroke: black;
  stroke-width: 2px;
}
.table_wrap .line.tiwenline {
  stroke: blue;
  fill: none;
}

.table_wrap .line.redColor {
  stroke: red;
  fill: none;
}
.table_wrap .axis path,
.table_wrap .axis line,
.table_wrap .line {
  stroke: #000;
  fill: none;
}
.table_wrap .legend {
  display: flex;
}
.table_wrap .legend .legend-text {
  display: flex;
}
.table_wrap .legend .legend-item {
  margin-right: 20px;
}
</style>