Jelajahi Sumber

'修改安卓土建图例不显示问题'

zhangyu 4 tahun lalu
induk
melakukan
ca33b8b96c
1 mengubah file dengan 30 tambahan dan 2 penghapusan
  1. 30 2
      src/views/FloorFunc.vue

+ 30 - 2
src/views/FloorFunc.vue

@@ -80,8 +80,7 @@
             <td>
               <div class="cell">
                 <div v-if='tr.FillColor && tr.StrokeColor' class="Url-img"
-                  :style='`background:${tr.FillColor};border:1px solid ${tr.StrokeColor}`'>
-                </div>
+                :style="`backgroundColor:${formatColor(tr.FillColor)};border:1px solid ${formatColor(tr.StrokeColor)};`"></div>
                 <div v-else>{{'--'}}</div>
               </div>
             </td>
@@ -192,6 +191,35 @@ export default {
         Toast.fail('缺少楼层信息!');
       }
     },
+    // 十六进制颜色转rgba
+    formatColor(sHex) {
+      // 十六进制颜色值的正则表达式
+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/
+      /* 16进制颜色转为RGB格式 */
+      var sColor = sHex.toLowerCase()
+      var alpha = 1
+      if (sColor && reg.test(sColor)) {
+          if (sColor.length === 4 || sColor.length === 5) {
+              var sColorNew = '#'
+              for (var i = 1; i < sColor.length; i += 1) {
+                  sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+              }
+              sColor = sColorNew
+          }
+          // 如果有透明度再执行
+          if (sColor.length === 9) {
+              alpha = (parseInt('0x' + sColor.slice(7, 9)) / 255).toFixed(2)
+          }
+          //  处理六位的颜色值
+          var sColorChange = []
+          for (var i = 1; i < 7; i += 2) {
+              sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+          }
+          return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
+      } else {
+          return sColor
+      }
+    },
   },
   watch: {
     categoryId: {