大屏色系修改

src/styles/variables.scss

@@ -21,6 +21,9 @@ $sideBarPadding: 24px;
 $blueColor: #3182CE;
 $nightActiveText: #FFFFFF;
 
+// 大屏颜色
+$monitorColor: #23B9FF;
+
 // [-- 不同色系样式变量 --]
 // 浅色系
 $menuBg-jcceLight:#ffffff;
@@ -218,4 +221,5 @@ $menuBg-jcceDark:inherit;
   nightActiveText:$nightActiveText;
   menuBg-jcceLight:$menuBg-jcceLight;
   menuBg-jcceDark: $menuBg-jcceDark;
+  monitorColor:$monitorColor;
 }

src/views/prometheusMonitor/earth.vue

@@ -11,8 +11,8 @@ export default {
       mshs: 1.0,
       satellitesArr: [],
       mapMarks: [],
-      area: []
-
+      area: [],
+      monitorColor: '#23B9FF'
     }
   },
   mounted() {
@@ -207,7 +207,7 @@ export default {
       const satellite = new Three.Sprite(new Three.SpriteMaterial({ map: new Three.CanvasTexture(this.generateSprite()) }))
       satellite.scale.x = satellite.scale.y = satellite.scale.z = 2
       satellite.position.set(distance - 0.5, -2, -1)
-      const track = new Three.Mesh(new Three.RingGeometry(distance - 0.08, distance, 64, 1), new Three.MeshBasicMaterial({ color: '#51ffff', side: Three.DoubleSide }))
+      const track = new Three.Mesh(new Three.RingGeometry(distance - 0.08, distance, 64, 1), new Three.MeshBasicMaterial({ color: this.monitorColor, side: Three.DoubleSide }))
       const centerMesh = new Three.Mesh(new Three.SphereGeometry(1, 1, 1), new Three.MeshLambertMaterial())
       var pivotPoint = new Three.Object3D()
       pivotPoint.add(satellite)
@@ -224,10 +224,10 @@ export default {
       var context = canvas.getContext('2d')
       context.beginPath()
       context.arc(20, 20, 20, 0, 2 * Math.PI, true)
-      context.fillStyle = '#51ffff'
+      context.fillStyle = this.monitorColor
       context.fill()
       context.lineWidth = 1
-      context.strokeStyle = '#51ffff'
+      context.strokeStyle = this.monitorColor
       context.stroke()
       return canvas
     },

src/views/prometheusMonitorNew/components/PercentPieChart.vue

@@ -16,7 +16,8 @@ export default {
     return {
       usagedRate: '32%',
       usagedCount: 26,
-      usageingCount: 19
+      usageingCount: 19,
+      monitorColor: '#23B9FF'
     }
   },
   beforeMount() {
@@ -37,7 +38,7 @@ export default {
       })
     },
     drawChart(value1, value2) {
-      const color = ['#4BF8F7', '#333A3F']
+      const color = [this.monitorColor, '#333A3F']
       const loadOption = {
         tooltip: {
           trigger: 'axis'

src/views/prometheusMonitorNew/index.vue

@@ -14,9 +14,9 @@
             <div class="left_22_num">
               <div class="left_22_title">
                 <span> 已部署 </span>
-                <span style="color: #51FFFF"> {{ usagedCount }} </span>
+                <span style="color: #23B9FF"> {{ usagedCount }} </span>
               </div>
-              <ProgressChart id="progress1" color="#51FFFF" />
+              <ProgressChart id="progress1" color="#23B9FF" />
               <div class="left_22_title">
                 <span> 未部署 </span>
                 <span> {{ usageingCount }} </span>
@@ -286,6 +286,8 @@ export default {
 </script>
 
 <style lang="scss" >
+@import "~@/styles/variables.scss";
+
 .back{
   position: absolute;
   right: 12px;
@@ -312,7 +314,7 @@ export default {
       color: #FEFCFC;
     }
     .title{
-      color: #51FFFF;
+      color: #{$monitorColor};
       font-size: 24px;
     }
     .floatLeft,.floatRight {
@@ -404,7 +406,7 @@ export default {
             font-weight: 400;
             .num{
               font-size: 36px;
-              color: #51FFFF;
+              color: #{$monitorColor};
               font-family: Impact;
             }
           }