|
@@ -180,7 +180,7 @@
|
|
|
<!-- <record></record> -->
|
|
|
<tr class="recorde temperature_mark">
|
|
|
<td colspan="2" rowspan="45" style="border-right: 1px solid white">
|
|
|
- <div style="margin-top: 476px; height: 31px">
|
|
|
+ <div :style="{ marginTop: legendStyle.marginTop, height: '31px' }">
|
|
|
<p style="width: 35px">
|
|
|
<span>口表•</span>
|
|
|
<span style="color: blue">腋表x</span>
|
|
@@ -193,28 +193,28 @@
|
|
|
</td>
|
|
|
<td colspan="3" rowspan="45">
|
|
|
<div style="color: red" class="num_wrapper">
|
|
|
- <p style="margin-top: 0; text-align: right">脉搏次/分</p>
|
|
|
- <p style="margin-top: 32px">180</p>
|
|
|
- <p style="margin-top: 55px">160</p>
|
|
|
- <p style="margin-top: 55px">140</p>
|
|
|
- <p style="margin-top: 55px">120</p>
|
|
|
- <p style="margin-top: 55px">100</p>
|
|
|
- <p style="margin-top: 55px">80</p>
|
|
|
- <p style="margin-top: 56px">60</p>
|
|
|
- <p style="margin-top: 56px">40</p>
|
|
|
+ <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="margin-top: 0">体温<br />x</p>
|
|
|
- <p style="margin-top: 32px">41</p>
|
|
|
- <p style="margin-top: 55px">40</p>
|
|
|
- <p style="margin-top: 55px">39</p>
|
|
|
- <p style="margin-top: 55px">38</p>
|
|
|
- <p style="margin-top: 55px">37</p>
|
|
|
- <p style="margin-top: 55px">36</p>
|
|
|
- <p style="margin-top: 56px">35</p>
|
|
|
- <p style="margin-top: 56px">34</p>
|
|
|
+ <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
|
|
@@ -677,6 +677,22 @@ export default {
|
|
|
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'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
@@ -1184,6 +1200,30 @@ export default {
|
|
|
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 = {
|
|
@@ -1210,6 +1250,145 @@ export default {
|
|
|
}
|
|
|
|
|
|
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'
|
|
|
+ };
|
|
|
+
|
|
|
+ // 可以根据不同分辨率设置不同样式
|
|
|
+ // 例如: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'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 例如:1366x768
|
|
|
+ else if (screenWidth === 1366 && screenHeight === 768) {
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '44px',
|
|
|
+ normalRowMarginTop: '61px',
|
|
|
+ lastRowMarginTop: '61px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '44px',
|
|
|
+ normalRowMarginTop: '61px',
|
|
|
+ lastRowMarginTop: '61px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 例如: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'
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+ // 例如: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'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 例如:1360x768
|
|
|
+ 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'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 其他分辨率使用默认样式
|
|
|
+ else {
|
|
|
+ pulseStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ temperatureStyle = {
|
|
|
+ titleMarginTop: '0px',
|
|
|
+ firstRowMarginTop: '32px',
|
|
|
+ normalRowMarginTop: '55px',
|
|
|
+ lastRowMarginTop: '56px'
|
|
|
+ };
|
|
|
+ legendStyle = {
|
|
|
+ marginTop: '476px'
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ this.pulseScaleStyle = pulseStyle;
|
|
|
+ this.temperatureScaleStyle = temperatureStyle;
|
|
|
+ this.legendStyle = legendStyle;
|
|
|
},
|
|
|
},
|
|
|
};
|