From b783d1755fb27438c7b597095113d5eef0e846d3 Mon Sep 17 00:00:00 2001
From: MTrunning <1262327911@qq.com>
Date: Wed, 18 Mar 2020 18:01:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E9=97=B4=E9=83=A8=E5=88=86=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss                    |   6 +-
 src/components/echart/center/centerChart1.vue |  79 ++++
 src/components/echart/center/centerChart2.vue |  79 ++++
 src/components/echart/centerChart.vue         | 341 ------------------
 src/views/center.vue                          |  53 ++-
 src/views/centreRight2.vue                    |   2 +-
 src/views/index.vue                           |   7 +-
 7 files changed, 205 insertions(+), 362 deletions(-)
 create mode 100644 src/components/echart/center/centerChart1.vue
 create mode 100644 src/components/echart/center/centerChart2.vue
 delete mode 100644 src/components/echart/centerChart.vue

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index b8f4a22..f3b17df 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -63,7 +63,7 @@ a {
 }
 
 .bg-color-black {
-  background-color: rgba(19, 25, 47, .5);
+  background-color: rgba(19, 25, 47, .6);
 }
 
 .bg-color-blue {
@@ -104,10 +104,10 @@ a {
 }
 
 .colorBlue {
-  color: #1A5CD7 !important;
+  color: #257dff !important;
 
   &:hover {
-    color: #1A5CD7 !important;
+    color: #257dff !important;
   }
 }
 
diff --git a/src/components/echart/center/centerChart1.vue b/src/components/echart/center/centerChart1.vue
new file mode 100644
index 0000000..bace033
--- /dev/null
+++ b/src/components/echart/center/centerChart1.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div id="centerChart1" style="width:120px;height:100px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centerChart1")
+      );
+      //  ----------------------------------------------------------------
+      let tips = 60;
+      let option = {
+        title: [
+          {
+            text: tips * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: "#3fc0fb",
+              fontSize: 16
+            }
+          }
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["75%", "80%"],
+            center: ["50%", "50%"],
+            hoverAnimation: false,
+            color: ["#00bcd44a", "transparent"],
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: tips,
+                itemStyle: {
+                  normal: {
+                    color: "#03a9f4",
+                    shadowBlur: 10,
+                    shadowColor: "#97e2f5"
+                  }
+                }
+              },
+              {
+                value: 100 - tips
+              }
+            ]
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/echart/center/centerChart2.vue b/src/components/echart/center/centerChart2.vue
new file mode 100644
index 0000000..dfc108f
--- /dev/null
+++ b/src/components/echart/center/centerChart2.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div id="centerChart2" style="width:120px;height:100px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centerChart2")
+      );
+      //  ----------------------------------------------------------------
+      let tips = 40;
+      let option = {
+        title: [
+          {
+            text: tips * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: "#67e0e3",
+              fontSize: 16
+            }
+          }
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["75%", "80%"],
+            center: ["50%", "50%"],
+            hoverAnimation: false,
+            color: ["#f3ffb070", "transparent"],
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: tips,
+                itemStyle: {
+                  normal: {
+                    color: "#ff9800",
+                    shadowBlur: 10,
+                    shadowColor: "#97e2f5"
+                  }
+                }
+              },
+              {
+                value: 100 - tips
+              }
+            ]
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/echart/centerChart.vue b/src/components/echart/centerChart.vue
deleted file mode 100644
index 824b087..0000000
--- a/src/components/echart/centerChart.vue
+++ /dev/null
@@ -1,341 +0,0 @@
-<template>
-  <div>
-    <div id="centreLeft1Chart"></div>
-  </div>
-</template>
-
-<script>
-const echarts = require("echarts");
-export default {
-  data() {
-    return {};
-  },
-  mounted() {
-    this.drawPie();
-  },
-  methods: {
-    drawPie(sidebar) {
-      // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("centreLeft1Chart")
-      );
-      //  ----------------------------------------------------------------
-      var value = 83;
-      let option = {
-        backgroundColor: "000",
-        title: {
-          text: `${value}分`,
-          subtext: "综合健康评分",
-          left: "center",
-          top: "center", //top待调整
-          textStyle: {
-            color: "#fff",
-            fontSize: 80,
-            fontFamily: "DINAlternate-Bold"
-          },
-          subtextStyle: {
-            color: "#ff",
-            fontSize: 35,
-            fontFamily: "PingFangSC-Regular",
-            top: "center"
-          },
-          itemGap: -4 //主副标题间距
-        },
-        xAxis: {
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          }
-          // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-        },
-        yAxis: {
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          }
-        },
-        series: [
-          // 内圆
-          {
-            type: "pie",
-            radius: ["0", "50%"],
-            center: ["50%", "50%"],
-            z: 0,
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#1147A1"
-                  },
-                  {
-                    offset: 0.5,
-                    color: "#423DB3"
-                  },
-                  {
-                    offset: 1,
-                    color: "#1147A1"
-                  }
-                ]),
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false
-                }
-              }
-            },
-            label: {
-              normal: {
-                position: "center"
-              }
-            },
-            data: [100]
-          },
-          // 进度圈
-          {
-            type: "pie",
-            clockWise: true,
-            radius: ["60%", "55%"],
-            data: [
-              {
-                value: value,
-                itemStyle: {
-                  normal: {
-                    borderWidth: 10,
-                    borderColor: {
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: "#7940FE" || "#00cefc" // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: "#2A69EC" || "#367bec" // 100% 处的颜色
-                        }
-                      ]
-                    },
-                    color: {
-                      // 完成的圆环的颜色
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: "#7940FE" || "#00cefc" // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: "#2A69EC" || "#367bec" // 100% 处的颜色
-                        }
-                      ]
-                    },
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    }
-                  }
-                }
-              },
-              {
-                name: "gap",
-                value: 100 - value,
-                itemStyle: {
-                  normal: {
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    },
-                    color: "rgba(0, 0, 0, 0)",
-                    borderColor: "rgba(0, 0, 0, 0)",
-                    borderWidth: 0
-                  }
-                }
-              }
-            ]
-          },
-          //刻度尺
-          {
-            // name: "白色圈刻度",
-            type: "gauge",
-            radius: "67%",
-            startAngle: 225, //刻度起始
-            endAngle: -134.8, //刻度结束
-            z: 4,
-            axisTick: {
-              show: true,
-              lineStyle: {
-                width: 2,
-                color: "rgba(1,244,255, 0.9)"
-              }
-            },
-            splitLine: {
-              length: 16, //刻度节点线长度
-              lineStyle: {
-                width: 2,
-                color: "rgba(1,244,255, 0.9)"
-              } //刻度节点线
-            },
-            axisLabel: {
-              color: "rgba(255,255,255,0)",
-              fontSize: 12
-            }, //刻度节点文字颜色
-            pointer: {
-              show: false
-            },
-            axisLine: {
-              lineStyle: {
-                opacity: 0
-              }
-            },
-            detail: {
-              show: false
-            },
-            data: [
-              {
-                value: 0,
-                name: ""
-              }
-            ]
-          },
-          // 刻度圈
-          {
-            type: "pie",
-            radius: ["0%", "73%"],
-            center: ["50%", "50%"],
-            avoidLabelOverlap: false,
-            label: {
-              normal: {
-                show: false,
-                position: "center"
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontWeight: "bold"
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0.05,
-                      color: "rgba(32,36,107, 0.2)"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "rgba(32,36,107,0.3)"
-                    },
-                    {
-                      offset: 0.95,
-                      color: "rgba(32,36,107, 0.2)"
-                    }
-                  ]
-                }
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: [
-              {
-                value: 3235
-              }
-            ]
-          },
-          //最外层圈
-          {
-            type: "pie",
-            radius: ["0%", "85%"],
-            center: ["50%", "50%"],
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-            label: {
-              normal: {
-                show: false,
-                position: "center"
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontWeight: "bold"
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0.05,
-                      color: "rgba(21,24,65, 0.2)"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "rgba(21,24,65, 0.3)"
-                    },
-                    {
-                      offset: 0.95,
-                      color: "rgba(21,24,65, 0.2)"
-                    }
-                  ]
-                }
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: [
-              {
-                value: 3235
-              }
-            ]
-          }
-        ]
-      };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
-      //侧边栏变化
-      if (sidebar) {
-        myChartPieLeft.resize();
-      }
-    }
-  },
-  destroyed() {
-    window.onresize = null;
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
diff --git a/src/views/center.vue b/src/views/center.vue
index f2f9ed4..6403b78 100644
--- a/src/views/center.vue
+++ b/src/views/center.vue
@@ -2,22 +2,31 @@
   <div id="center">
     <div class="up">
       <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
-        <p class="ml-3 fs-xl">{{item.title}}</p>
+        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
         <div>
           <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
         </div>
       </div>
     </div>
     <div class="down">
-      <div class="ranking">
-        <dv-scroll-ranking-board :config="ranking" />
+      <div class="ranking bg-color-black">
+        <span style="color:#5cd9e8">
+          <icon name="align-left"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board :config="ranking" style="height:220px" />
       </div>
       <div class="percent">
-        <div class="item">
-          <centerChart/>
+        <div class="item  bg-color-black">
+          <span>今日MR通过率</span>
+          <centerChart1 />
+        </div>
+        <div class="item  bg-color-black">
+          <span>今日MR达标率</span>
+          <centerChart2 />
         </div>
         <div class="water">
-          <dv-water-level-pond :config="water" style="height: 125px" />
+          <dv-water-level-pond :config="water" style="height: 120px" />
         </div>
       </div>
     </div>
@@ -25,7 +34,8 @@
 </template>
 
 <script>
-import centerChart from "@/components/echart/centerChart";
+import centerChart1 from "@/components/echart/center/centerChart1";
+import centerChart2 from "@/components/echart/center/centerChart2";
 
 export default {
   data() {
@@ -120,12 +130,16 @@ export default {
         unit: "份"
       },
       water: {
-        data: [24, 45]
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter:'{value}%',
+        waveNum:3
       }
     };
   },
   components: {
-    centerChart
+    centerChart1,
+    centerChart2
   }
 };
 </script>
@@ -148,22 +162,31 @@ export default {
     }
   }
   .down {
-    padding: 0.5rem;
+    padding: 4px;
     padding-bottom: 0px;
     width: 100%;
     display: flex;
-    height: 250px;
+    height: 255px;
     justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
     .ranking {
-      width: 58%;
+      padding: 10px;
+      width: 59%;
     }
     .percent {
       width: 40%;
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       .item {
-        width: 100%;
-        height: 125px;
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 7px;
+          display: flex;
+          justify-content: center;
+        }
       }
       .water {
         width: 100%;
diff --git a/src/views/centreRight2.vue b/src/views/centreRight2.vue
index 0268908..1dba378 100644
--- a/src/views/centreRight2.vue
+++ b/src/views/centreRight2.vue
@@ -2,7 +2,7 @@
   <div id="centreRight2">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-         <span style="color:#5cd9e8">
+        <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
         </span>
         <span class="fs-xl text mx-2">产品销售渠道分析</span>
diff --git a/src/views/index.vue b/src/views/index.vue
index 859e97c..8823713 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -43,7 +43,10 @@
             <div class="react-left bg-color-blue mr-3">
               <span class="text fw-b">构建数据分析</span>
             </div>
-            <div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
+            <div
+              class="react-left mr-4"
+              style="width: 500px; background-color: #0f1325; text-align: right;"
+            >
               <span class="react-after"></span>
               <span class="text">2020年03月16日 周一 12:00</span>
             </div>
@@ -65,7 +68,7 @@
             </div>
             <!-- 中间 -->
             <div>
-              <center/>
+              <center />
             </div>
             <!-- 中间 -->
             <div>