|
|
@@ -0,0 +1,2301 @@
|
|
|
+<template>
|
|
|
+ <div class="table_wrap">
|
|
|
+ <div
|
|
|
+ :key="'comKey' + comKey"
|
|
|
+ class="container"
|
|
|
+ :style="{
|
|
|
+ marginTop: containerStyle.marginTop,
|
|
|
+ left: containerStyle.left
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <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"> 姓名：</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: 50px; text-align: left">{{
|
|
|
+ info.age + "岁"
|
|
|
+ }}</span>
|
|
|
+ <span class="tbale-label">性别：</span>
|
|
|
+ <span style="display: inline-block; width: 50px; 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: 100px; 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: 80px; text-align: left">{{
|
|
|
+ info.inpatientNo
|
|
|
+ }}</span>
|
|
|
+ <span style="display: inline-block; width: 40px; text-align: left"> </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
|
|
|
+ ? "日 期"
|
|
|
+ : 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']"
|
|
|
+ :style="index !== 0 ? { color: 'red' } : {}"
|
|
|
+ v-for="(item, index) in surgeryDays"
|
|
|
+ :key="index + '|surgeryDays'"
|
|
|
+ >
|
|
|
+ {{ index === 0 ? "手术后天数" : ((item === 0 || item) ? item : '') }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="table-just" rowspan="2" colspan="8">
|
|
|
+ 时 间
|
|
|
+ </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> -->
|
|
|
+ <div class="recorde-text" :style="recordeTextStyle" v-html="getSymbolHtml(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>
|
|
|
+
|
|
|
+ <!-- 皮试结果第一行 -->
|
|
|
+ <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 + '|031'"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ index === 0
|
|
|
+ ? "皮试结果1"
|
|
|
+ : typesViewData["031"] && typesViewData["031"][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 + '|032'"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ index === 0
|
|
|
+ ? "皮试结果2"
|
|
|
+ : typesViewData["032"] && typesViewData["032"][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 + '|033'"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ index === 0
|
|
|
+ ? "皮试结果3"
|
|
|
+ : typesViewData["033"] && typesViewData["033"][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 + '|034'"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ index === 0
|
|
|
+ ? "皮试结果4"
|
|
|
+ : typesViewData["034"] && typesViewData["034"][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: [],
|
|
|
+ coolingMarkers: [],
|
|
|
+ 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',
|
|
|
+ left: '28px'
|
|
|
+ },
|
|
|
+ chromeMatch:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 topTdHeight = this.$refs.topTd[0].getBoundingClientRect().height;
|
|
|
+ const defaultMarginTop = (Math.round(topTdHeight) - 18) * 10 + 28;
|
|
|
+ this.marginTop = defaultMarginTop;
|
|
|
+
|
|
|
+ console.log('=== mounted调试信息 ===');
|
|
|
+ console.log('topTd元素高度:', topTdHeight);
|
|
|
+ console.log('计算过程:', `(${Math.round(topTdHeight)} - 18) * 10 + 28 = ${defaultMarginTop}`);
|
|
|
+ console.log('最终marginTop:', this.marginTop);
|
|
|
+ console.log('========================');
|
|
|
+
|
|
|
+ // 根据分辨率设置样式
|
|
|
+ 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 "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生成可安全渲染的HTML，用于在"入院"和时间之间插入竖向间隔
|
|
|
+ getSymbolHtml(index) {
|
|
|
+ const text = this.getSymbolTextArr(index);
|
|
|
+ if (!text) return "";
|
|
|
+ // 通用处理：将"标注文字 + 中文时间(…时…分)"拆分，插入竖向间隔
|
|
|
+ const si = text.indexOf('时');
|
|
|
+ const fi = text.indexOf('分', si + 1);
|
|
|
+ if (si > 0 && fi > si) {
|
|
|
+ const numerals = '零一二三四五六七八九十';
|
|
|
+ let start = si - 1;
|
|
|
+ // 回溯找到时间数字段起始（中文数字连续区）
|
|
|
+ while (start >= 0 && numerals.indexOf(text.charAt(start)) !== -1) {
|
|
|
+ start--;
|
|
|
+ }
|
|
|
+ start++;
|
|
|
+ if (start > 0) {
|
|
|
+ const label = text.substring(0, start);
|
|
|
+ const timePart = text.substring(start);
|
|
|
+ return (
|
|
|
+ '<span class="admission-wrap">'
|
|
|
+ + '<span class="admission-label">' + this.escapeHtml(label) + '</span>'
|
|
|
+ + '<span class="admission-gap"></span>'
|
|
|
+ + '<span class="admission-time">' + this.escapeHtml(timePart) + '</span>'
|
|
|
+ + '</span>'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 兜底：无法识别时间结构时原样转义输出
|
|
|
+ return this.escapeHtml(text);
|
|
|
+ },
|
|
|
+ // 简单HTML转义，防止渲染其他标注时出现不必要的HTML解析
|
|
|
+ escapeHtml(str) {
|
|
|
+ return String(str)
|
|
|
+ .replace(/&/g, '&')
|
|
|
+ .replace(/</g, '<')
|
|
|
+ .replace(/>/g, '>')
|
|
|
+ .replace(/"/g, '"')
|
|
|
+ .replace(/'/g, ''');
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ // 从外层页面获取手术状态
|
|
|
+ this.info.oprtStatus = this.patientInfo.oprtStatus;
|
|
|
+ });
|
|
|
+
|
|
|
+ getChartData(param).then(res => {
|
|
|
+ this.rowsInfo = res.rows;
|
|
|
+ this.typesInfo = res.types;
|
|
|
+ this.coolingMarkers = res.coolingMarkers || [];
|
|
|
+ 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.drawCoolingMarkers(main, xScale, yScale);
|
|
|
+ this.initTypes();
|
|
|
+ // this.hoverEvent(main)
|
|
|
+ },
|
|
|
+ drawCoolingMarkers(main, xScale, yScale) {
|
|
|
+ if (!this.coolingMarkers || this.coolingMarkers.length === 0) return;
|
|
|
+ const group = {};
|
|
|
+ this.coolingMarkers.forEach(m => {
|
|
|
+ if (!m) return;
|
|
|
+ const idx = Number(m.index);
|
|
|
+ const before = m.before != null ? Number(m.before) : null;
|
|
|
+ const after = m.after != null ? Number(m.after) : null;
|
|
|
+ if (!Number.isFinite(idx) || before === null || after === null) return;
|
|
|
+ if (!group[idx]) group[idx] = [];
|
|
|
+ group[idx].push({ before, after });
|
|
|
+ });
|
|
|
+
|
|
|
+ const step = 2; // 同格多标记时的水平偏移像素
|
|
|
+ Object.keys(group).forEach(k => {
|
|
|
+ const idx = Number(k);
|
|
|
+ const arr = group[k];
|
|
|
+ const n = arr.length;
|
|
|
+ const start = -Math.floor((n - 1) / 2) * step;
|
|
|
+ arr.forEach((m, i) => {
|
|
|
+ const x = xScale(idx) + (n > 1 ? start + i * step : 0);
|
|
|
+ const yTop = yScale(Number(m.before));
|
|
|
+ const yBottom = yScale(Number(m.after));
|
|
|
+ if (!Number.isFinite(yTop) || !Number.isFinite(yBottom)) return;
|
|
|
+ // 竖向红色虚线
|
|
|
+ main
|
|
|
+ .append("line")
|
|
|
+ .attr("x1", x)
|
|
|
+ .attr("y1", yTop)
|
|
|
+ .attr("x2", x)
|
|
|
+ .attr("y2", yBottom)
|
|
|
+ .attr("stroke", "#ff0000")
|
|
|
+ .attr("stroke-width", 1)
|
|
|
+ .attr("stroke-dasharray", "5 5");
|
|
|
+ // 底部小圆圈
|
|
|
+ main
|
|
|
+ .append("circle")
|
|
|
+ .attr("cx", x)
|
|
|
+ .attr("cy", yBottom)
|
|
|
+ .attr("r", 3)
|
|
|
+ .attr("stroke", "#ff0000")
|
|
|
+ .attr("stroke-width", 1)
|
|
|
+ .attr("fill", "none");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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('=== 调试信息 ===');
|
|
|
+ console.log('屏幕分辨率:', screenWidth + 'x' + screenHeight);
|
|
|
+ console.log('浏览器缩放比例:', window.devicePixelRatio);
|
|
|
+ console.log('实际窗口尺寸:', window.innerWidth + 'x' + window.innerHeight);
|
|
|
+ console.log('计算的marginTop:', this.marginTop);
|
|
|
+ console.log('topTd元素高度:', this.$refs.topTd ? this.$refs.topTd[0].getBoundingClientRect().height : '未获取到');
|
|
|
+ console.log('================');
|
|
|
+ console.log('屏幕总分辨率:', screen.width + 'x' + screen.height);
|
|
|
+ console.log('浏览器窗口尺寸:', window.innerWidth + 'x' + window.innerHeight);
|
|
|
+ console.log('可用屏幕空间:', screen.availWidth + 'x' + screen.availHeight);
|
|
|
+ console.log('文档尺寸:', document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight);
|
|
|
+
|
|
|
+ // 计算被占用的空间
|
|
|
+ const taskbarWidth = screen.width - screen.availWidth;
|
|
|
+ const taskbarHeight = screen.height - screen.availHeight;
|
|
|
+ console.log('被占用的空间:', taskbarWidth + 'x' + taskbarHeight);
|
|
|
+
|
|
|
+ // 滚动条信息
|
|
|
+ const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
|
+ const scrollbarHeight = window.innerHeight - document.documentElement.clientHeight;
|
|
|
+ console.log('滚动条尺寸:', scrollbarWidth + 'x' + scrollbarHeight);
|
|
|
+
|
|
|
+ // 窗口外部尺寸
|
|
|
+ console.log('浏览器窗口外部尺寸:', window.outerWidth + 'x' + window.outerHeight);
|
|
|
+ console.log('窗口位置:', window.screenX + 'x' + window.screenY);
|
|
|
+
|
|
|
+ // 浏览器信息
|
|
|
+ console.log('用户代理:', navigator.userAgent);
|
|
|
+ console.log('平台:', navigator.platform);
|
|
|
+ console.log('语言:', navigator.language);
|
|
|
+ console.log('浏览器供应商:', navigator.vendor);
|
|
|
+ const ua = navigator.userAgent;
|
|
|
+ const chromeMatch = ua.match(/Chrome\/[\d.]+/);
|
|
|
+ this.chromeMatch = chromeMatch[0];
|
|
|
+ console.log('Chrome版本:', chromeMatch ? chromeMatch[0] : '未找到');
|
|
|
+
|
|
|
+ // 媒体查询检测
|
|
|
+ const isHighDPI = window.matchMedia('(-webkit-min-device-pixel-ratio: 2)').matches;
|
|
|
+ console.log('是否高DPI显示器:', isHighDPI);
|
|
|
+ console.log('================');
|
|
|
+ // DPI相关调试信息
|
|
|
+ console.log('=== DPI调试信息 ===');
|
|
|
+ console.log('devicePixelRatio (设备像素比):', window.devicePixelRatio);
|
|
|
+ console.log('CSS像素与物理像素比例:', 1 / window.devicePixelRatio);
|
|
|
+ console.log('屏幕物理尺寸 (英寸):', {
|
|
|
+ width: screenWidth / (96 * window.devicePixelRatio),
|
|
|
+ height: screenHeight / (96 * window.devicePixelRatio)
|
|
|
+ });
|
|
|
+ console.log('估算DPI:', {
|
|
|
+ horizontal: Math.round(screenWidth / (screenWidth / (96 * window.devicePixelRatio))),
|
|
|
+ vertical: Math.round(screenHeight / (screenHeight / (96 * window.devicePixelRatio)))
|
|
|
+ });
|
|
|
+ console.log('================');
|
|
|
+
|
|
|
+ // 默认样式（当前分辨率）
|
|
|
+ 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) {
|
|
|
+ this.applyConditionalPrintAdjustment()
|
|
|
+ // 默认刻度样式
|
|
|
+ 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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+
|
|
|
+ // 可以根据不同分辨率设置不同样式
|
|
|
+ // 例如：1920x1080
|
|
|
+ if (screenWidth === 1920 && screenHeight === 1080) {
|
|
|
+ if(this.marginTop > 0) {//marginTop:48
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ if(window.devicePixelRatio > 1) {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: this.marginTop + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 14) + 'px', //2楼儿科01 /3楼左1 /3楼左4
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }else {//marginTop:-2
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '44px',
|
|
|
+ normalRowMarginTop: '61px',
|
|
|
+ lastRowMarginTop: '61px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '44px',
|
|
|
+ normalRowMarginTop: '61px',
|
|
|
+ lastRowMarginTop: '61px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: '22px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ if(this.chromeMatch && (this.chromeMatch == 'Chrome/139.0.0.0')) {//11病区，手推车电脑
|
|
|
+ this.removeConditionalPrintCSS()
|
|
|
+ console.log('removeConditionalPrintCSS')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 例如：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'
|
|
|
+ };
|
|
|
+ if(this.marginTop > 38) {
|
|
|
+ if(this.marginTop < 58) {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 15) + 'px',//5楼左2 /8楼左1 /十楼左2 /11楼左2 /12楼左2 /15楼左2 /
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else {
|
|
|
+ if(window.devicePixelRatio < 1) {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 5) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 14) + 'px',//13楼左2
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log("this.marginTop > 38",containerStyle.marginTop)
|
|
|
+ }else {
|
|
|
+ if(window.devicePixelRatio < 1) {
|
|
|
+ if(this.marginTop > 18) {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 10 + 14) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 10 + 28) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }else { //6楼左1 /3楼左2 /5楼左1 /9楼左一 /8楼左2 /15楼左1
|
|
|
+ this.applyConditionalPrintAdjustment(37)
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 10 + 14) + 'px',
|
|
|
+ left: '35px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log("this.marginTop <= 38",containerStyle.marginTop)
|
|
|
+ }
|
|
|
+ console.log("this.marginTop0000000000000000000000",this.marginTop)
|
|
|
+ console.log("marginTop.containerStyle",containerStyle.marginTop)
|
|
|
+ }
|
|
|
+ // 例如：1536x864
|
|
|
+ else if (screenWidth === 1536 && screenHeight === 864) {
|
|
|
+ if(this.chromeMatch && (this.chromeMatch == 'Chrome/139.0.0.0')) {
|
|
|
+ this.removeConditionalPrintCSS()
|
|
|
+ console.log("Chrome版本111111111111111111111",this.chromeMatch)
|
|
|
+ }
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '40px',
|
|
|
+ normalRowMarginTop: '60px',
|
|
|
+ lastRowMarginTop: '60px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '40px',
|
|
|
+ normalRowMarginTop: '60px',
|
|
|
+ lastRowMarginTop: '60px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: '23px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+ // 例如：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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 例如：1600x900
|
|
|
+ else if (screenWidth === 1600 && screenHeight === 900) {
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ if((this.marginTop == 48) && (window.devicePixelRatio == 1) && (window.innerHeight == 789)) {//2楼左2 /7楼左2
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 14) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else if((this.marginTop == 48) && (window.devicePixelRatio == 1) && (window.innerHeight == 799)) {//11楼左1
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: (this.marginTop + 14 + 2) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }else {
|
|
|
+ containerStyle = {
|
|
|
+ marginTop: this.marginTop + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log('1600x900分辨率','marginTop:',this.marginTop,'window.devicePixelRatio',window.devicePixelRatio,'window.innerHeight',window.innerHeight)
|
|
|
+ }
|
|
|
+ // 例如：1440x900
|
|
|
+ else if (screenWidth === 1440 && screenHeight === 900) {
|
|
|
+ if(this.marginTop > 38) {
|
|
|
+ if(this.marginTop < 58) {
|
|
|
+ if((window.innerHeight == 712) || (window.innerHeight == 757)) {//九楼左2 （打印偏右半格）有俩个，怀疑是不同版本的谷歌
|
|
|
+ this.removeConditionalPrintCSS()
|
|
|
+ }
|
|
|
+ if(window.innerHeight == 789) {//6楼左2 /3楼左3 /3楼左5 /10楼左1 /12楼左1
|
|
|
+ if(this.chromeMatch && (this.chromeMatch == 'Chrome/109.0.0.0')) {
|
|
|
+ this.removeConditionalPrintCSS() //6楼左2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 + 14 + 2) + 'px',//加上2是因为偏上一点点
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ console.log("window.innerHeight2222222222",window.innerHeight);
|
|
|
+ }else {
|
|
|
+ if((this.marginTop == 58) && (window.devicePixelRatio == 1) && (window.innerHeight == 785) && (this.chromeMatch && (this.chromeMatch == 'Chrome/95.0.4638.69'))) {//13楼左1
|
|
|
+ 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 + 14) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ if(window.devicePixelRatio < 1) {
|
|
|
+ if(window.innerHeight == 876) {//十楼左第一台
|
|
|
+ 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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }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 + 7) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ if(window.innerHeight == 757) {//7楼左1
|
|
|
+ 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 + 28) + 'px',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 其他分辨率使用默认样式
|
|
|
+ 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',
|
|
|
+ left: '28px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log("this.marginTop11111111111111111111",this.marginTop)
|
|
|
+ this.pulseScaleStyle = pulseStyle;
|
|
|
+ this.temperatureScaleStyle = temperatureStyle;
|
|
|
+ this.legendStyle = legendStyle;
|
|
|
+ this.containerStyle = containerStyle;
|
|
|
+ },
|
|
|
+ // 打印位置调整已通过CSS媒体查询处理，无需JavaScript逻辑
|
|
|
+
|
|
|
+ // 条件化打印位置调整方法 - 可在需要时调用
|
|
|
+ applyConditionalPrintAdjustment(leftOffset) {
|
|
|
+ try {
|
|
|
+ console.log('🔧 应用条件化打印位置调整');
|
|
|
+
|
|
|
+ // 解析参数：支持 35 / '35' / '35px'，默认 35px
|
|
|
+ const parsed = leftOffset == null
|
|
|
+ ? 35
|
|
|
+ : Number(String(leftOffset).replace(/px$/i, ''));
|
|
|
+ const leftPx = Number.isFinite(parsed) ? `${parsed}px` : '35px';
|
|
|
+
|
|
|
+ // 先移除旧样式
|
|
|
+ this.removeConditionalPrintCSS();
|
|
|
+
|
|
|
+ // 创建并注入新样式
|
|
|
+ const style = document.createElement('style');
|
|
|
+ style.id = 'conditional-print-adjustment';
|
|
|
+ style.textContent = `
|
|
|
+ @media print {
|
|
|
+ .container {
|
|
|
+ left: ${leftPx} !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 添加到页面头部
|
|
|
+ document.head.appendChild(style);
|
|
|
+ console.log('✅ 条件化打印CSS样式已添加，left =', leftPx);
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('❌ 条件化打印位置调整失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除条件化打印CSS样式
|
|
|
+ removeConditionalPrintCSS() {
|
|
|
+ const style = document.getElementById('conditional-print-adjustment');
|
|
|
+ if (style) {
|
|
|
+ style.remove();
|
|
|
+ console.log('✅ 条件化打印CSS样式已移除');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount() {
|
|
|
+ console.log('🧹 组件卸载，清理打印调整功能');
|
|
|
+ // 清理条件化打印CSS样式
|
|
|
+ this.removeConditionalPrintCSS();
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+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;
|
|
|
+}
|
|
|
+/* admission styles must be global to affect v-html content */
|
|
|
+.recorde-text .admission-wrap { display: inline-block; }
|
|
|
+.recorde-text .admission-label,
|
|
|
+.recorde-text .admission-time { display: block; }
|
|
|
+.recorde-text .admission-gap { display: block; height: 14px; }
|
|
|
+@media print {
|
|
|
+ .recorde-text .admission-gap { height: 14px; }
|
|
|
+}
|
|
|
+</style>
|
