Merge pull request '唐润平：添加右下角面板阈值刻度线' (#77) from trp_dev_v2.0 into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/77

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="gas-info-item">
-    <div class="info" ref="container"></div>
+    <div class="point" ref="point">
+      <div class="info" ref="container"></div>
+    </div>
+
     <div class="name">{{ gasInfo.name }}</div>
   </div>
 </template>
@@ -85,6 +88,8 @@ onMounted(handleOnMounted);
 function handleOnMounted() {
   e_info = Echarts.init(container.value);
   e_info.setOption(option);
+  // 设置阈值
+  setPoint();
 }
 watch(
   () => params.gasInfo.value,
@@ -101,13 +106,41 @@ watch(
     e_info.setOption(option);
   }
 );
+
+// 获取阈值dom元素
+const point = ref(null);
+//手写js实现阈值的在表盘的刻度的位置
+function setPoint() {
+  const deg = 360 * (params.gasInfo.point / params.gasInfo.max);
+  point.value.style.transform = `rotate(${deg}deg)`; //旋转指定度数
+  point.value.children[0].style.transform = `rotate(${-deg}deg)`; //注意子元素逆向旋转
+}
 </script>
 
 <style lang="scss" scoped>
 #gas-info-item {
   width: 231px;
-
   text-align: center;
+
+  //旋转定位阈值位于的刻度
+  .point {
+    width: 200px;
+    height: 200px;
+
+    position: relative;
+  }
+  //用伪元素标记阈值
+  .point::after {
+    content: "";
+    display: block;
+    height: 22px;
+    width: 4px;
+    background: white;
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
   .info {
     width: 200px;
     height: 200px;