commit

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

@@ -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;
     },
   },
 };