From a6d8dbd8eb8913679be2840906ee72920222796c Mon Sep 17 00:00:00 2001
From: MTrunning <1262327911@qq.com>
Date: Wed, 18 Mar 2020 21:27:37 +0800
Subject: [PATCH] =?UTF-8?q?1.0=E7=89=88=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/index.scss                    | 171 ++++----
 .../echart/bottom/bottomLeftChart.vue         |  18 +-
 .../echart/bottom/bottomRightChart.vue        | 409 ++++++++++++++++++
 src/views/bottomLeft.vue                      |   8 +-
 src/views/bottomRight.vue                     |  62 +++
 src/views/index.vue                           |  16 +-
 6 files changed, 580 insertions(+), 104 deletions(-)
 create mode 100644 src/components/echart/bottom/bottomRightChart.vue
 create mode 100644 src/views/bottomRight.vue

diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 4034006..727d612 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -12,99 +12,100 @@
     background-image: url("../assets/pageBg.png");
   }
 
-  .title {
-    position: relative;
-    width: 500px;
-    text-align: center;
-    background-size: cover;
-    background-repeat: no-repeat;
+  .host-body {
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
 
-    .title-text {
-      font-size: 2rem;
-      position: absolute;
-      bottom: 0px;
-      left: 50%;
-      transform: translate(-50%);
+      .title-text {
+        font-size: 2rem;
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .title-bototm {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translate(-50%);
+      }
     }
 
-    .title-bototm {
-      position: absolute;
-      bottom: -30px;
-      left: 50%;
-      transform: translate(-50%);
-    }
-  }
-
-  // 平行四边形
-  .react-left {
-    cursor: pointer;
-    font-size: 1.3rem;
-    width: 300px;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    transform: skewX(-45deg);
-
-    .react-after {
-      position: absolute;
-      right: -25px;
-      top: 0px;
+    // 平行四边形
+    .react-left {
+      cursor: pointer;
+      font-size: 1.3rem;
+      width: 300px;
       height: 50px;
-      width: 50px;
-      background-color: #0f1325;
-      transform: skewX(45deg);
-    }
-
-    .text {
-      display: inline-block;
-      transform: skewX(45deg);
-    }
-  }
-
-  .react-right {
-    cursor: pointer;
-    font-size: 1.3rem;
-    width: 300px;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    transform: skewX(45deg);
-
-    .react-before {
-      position: absolute;
-      left: -25px;
-      top: 0px;
-      height: 50px;
-      width: 50px;
-      background-color: #0f1325;
+      line-height: 50px;
+      text-align: center;
       transform: skewX(-45deg);
 
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0px;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
     }
 
-    .text {
-      display: inline-block;
-      transform: skewX(-45deg);
+    .react-right {
+      cursor: pointer;
+      font-size: 1.3rem;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+
+      .react-before {
+        position: absolute;
+        left: -25px;
+        top: 0px;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(-45deg);
+
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+
+    .body-box {
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+      }
+
+      // 底部数据
+      .bototm-box {
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+      }
     }
   }
-
-
-  .body-box {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: column;
-
-    //下方区域的布局
-    .content-box {
-      display: grid;
-      grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
-    }
-
-    // 底部数据
-    .bototm-box {
-      margin-top: 10px;
-      display: grid;
-      grid-template-columns: repeat(2, 50%);
-    }
-  }
-
 }
\ No newline at end of file
diff --git a/src/components/echart/bottom/bottomLeftChart.vue b/src/components/echart/bottom/bottomLeftChart.vue
index 2ccbd4d..f36d3f1 100644
--- a/src/components/echart/bottom/bottomLeftChart.vue
+++ b/src/components/echart/bottom/bottomLeftChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomLeftChart" style="width:900px;height:400px;"></div>
+    <div id="bottomLeftChart" style="width:900px;height:500px;"></div>
   </div>
 </template>
 
@@ -133,7 +133,7 @@ export default {
 
       let option = {
         title: {
-          text: "增量设备贯通情况-单位",
+          text: "",
           x: "center",
           y: 0,
           textStyle: {
@@ -158,12 +158,12 @@ export default {
           textStyle: {
             color: "#B4B4B4"
           },
-          top: "7%"
+          top: "0%"
         },
         grid: {
-          x: "12%",
-          width: "82%",
-          y: "12%"
+          x: "8%",
+          width: "88%",
+          y: "4%"
         },
         xAxis: {
           data: category,
@@ -243,9 +243,9 @@ export default {
               normal: {
                 barBorderRadius: 5,
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(156,107,211,0.5)" },
-                  { offset: 0.2, color: "rgba(156,107,211,0.3)" },
-                  { offset: 1, color: "rgba(156,107,211,0)" }
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                 ])
               }
             },
diff --git a/src/components/echart/bottom/bottomRightChart.vue b/src/components/echart/bottom/bottomRightChart.vue
new file mode 100644
index 0000000..a090346
--- /dev/null
+++ b/src/components/echart/bottom/bottomRightChart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="bottomRightChart" style="width:900px;height:480px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+    this.charTimg();
+  },
+  methods: {
+    charTimg() {
+      setInterval(() => {
+        this.drawPie();
+      }, 6000);
+    },
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("bottomRightChart")
+      );
+      //  ----------------------------------------------------------------
+      // 数据
+      let dateBase = new Date();
+      let year = dateBase.getFullYear();
+      let dottedBase = +dateBase + 1000 * 3600 * 24;
+      let weekCategory = [];
+
+      let radarData = [];
+      let radarDataAvg = [];
+      let maxData = 12000;
+      let weekMaxData = [];
+      let weekLineData = [];
+
+      // 周数据
+      for (let i = 0; i < 7; i++) {
+        // 日期
+        var date = new Date((dottedBase -= 1000 * 3600 * 24));
+        weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+
+        // 折线图数据
+        weekMaxData.push(maxData);
+        var distance = Math.round(Math.random() * 11000 + 500);
+        weekLineData.push(distance);
+
+        // 雷达图数据
+        // 我的指标
+        var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
+        var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
+        var hour = +(distance / 1000 / averageSpeed).toFixed(1);
+        var radarDayData = [distance, averageSpeed, maxSpeed, hour];
+        radarData.unshift(radarDayData);
+
+        // 平均指标
+        var distanceAvg = Math.round(Math.random() * 8000 + 4000);
+        var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
+        var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
+        var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
+        var radarDayDataAvg = [
+          distanceAvg,
+          averageSpeedAvg,
+          maxSpeedAvg,
+          hourAvg
+        ];
+        radarDataAvg.unshift(radarDayDataAvg);
+      }
+
+      // 颜色设置
+      let color = {
+        linearYtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#f5b44d"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        linearGtoB: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#43dfa2"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        linearBtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1c98e8"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        areaBtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(35,184,210,.2)"
+            },
+            {
+              offset: 1,
+              color: "rgba(35,184,210,0)"
+            }
+          ]
+        }
+      };
+      let option = {
+        title: {
+          text: "",
+          textStyle: {
+            color: "#D3D6DD",
+            fontSize: 24,
+            fontWeight: "normal"
+          },
+          subtext: year + "/" + weekCategory[6],
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 16
+          },
+          top: 50,
+          left: 80
+        },
+        legend: {
+          top: 120,
+          left: 80,
+          orient: "vertical",
+          itemGap: 15,
+          itemWidth: 12,
+          itemHeight: 12,
+          data: ["平均指标", "我的指标"],
+          textStyle: {
+            color: "#fff",
+            fontSize: 14
+          }
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        radar: {
+          center: ["68%", "27%"],
+          radius: "40%",
+          name: {
+            color: "#fff"
+          },
+          splitNumber: 8,
+          axisLine: {
+            lineStyle: {
+              color: color.linearYtoG,
+              opacity: 0.6
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: color.linearYtoG,
+              opacity: 0.6
+            }
+          },
+          splitArea: {
+            areaStyle: {
+              color: "#fff",
+              opacity: 0.1,
+              shadowBlur: 25,
+              shadowColor: "#000",
+              shadowOffsetX: 0,
+              shadowOffsetY: 5
+            }
+          },
+          indicator: [
+            {
+              name: "全程距离(m)",
+              max: maxData
+            },
+            {
+              name: "平均速度(km/h)",
+              max: 10
+            },
+            {
+              name: "最快速度(km/h)",
+              max: 12
+            },
+            {
+              name: "总计时间(h)",
+              max: 3.5
+            }
+          ]
+        },
+        grid: {
+          left: 90,
+          right: 80,
+          bottom: 40,
+          top: "60%"
+        },
+        xAxis: {
+          type: "category",
+          position: "bottom",
+          axisLine: true,
+          axisLabel: {
+            color: "rgba(255,255,255,.8)",
+            fontSize: 12
+          },
+          data: weekCategory
+        },
+        // 下方Y轴
+        yAxis: {
+          name: "工单",
+          nameLocation: "end",
+          nameGap: 24,
+          nameTextStyle: {
+            color: "rgba(255,255,255,.5)",
+            fontSize: 14
+          },
+          max: maxData,
+          splitNumber: 4,
+
+          axisLine: {
+            lineStyle: {
+              opacity: 0
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              opacity: 0.1
+            }
+          },
+          axisLabel: {
+            color: "rgba(255,255,255,.8)",
+            fontSize: 12
+          }
+        },
+        series: [
+          {
+            name: "",
+            type: "radar",
+            symbolSize: 0,
+            data: [
+              {
+                value: radarDataAvg[6],
+                name: "平均指标",
+                itemStyle: {
+                  normal: {
+                    color: "#f8d351"
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    opacity: 0
+                  }
+                },
+                areaStyle: {
+                  normal: {
+                    color: "#f8d351",
+                    shadowBlur: 25,
+                    shadowColor: "rgba(248,211,81,.3)",
+                    shadowOffsetX: 0,
+                    shadowOffsetY: -10,
+                    opacity: 1
+                  }
+                }
+              },
+              {
+                value: radarData[6],
+                name: "我的指标",
+                itemStyle: {
+                  normal: {
+                    color: "#43dfa2"
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    opacity: 0
+                  }
+                },
+                areaStyle: {
+                  normal: {
+                    color: color.linearGtoB,
+                    shadowBlur: 15,
+                    shadowColor: "rgba(0,0,0,.2)",
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 5,
+                    opacity: 0.8
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: "#fff"
+              }
+            },
+            lineStyle: {
+              normal: {
+                color: color.linearBtoG,
+                width: 3
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: color.areaBtoG
+              }
+            },
+            data: weekLineData,
+            lineSmooth: true,
+            markLine: {
+              silent: true,
+              data: [
+                {
+                  type: "average",
+                  name: "平均值"
+                }
+              ],
+              precision: 0,
+              label: {
+                normal: {
+                  formatter: "平均值: \n {c}"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: "rgba(248,211,81,.7)"
+                }
+              }
+            },
+            tooltip: {
+              position: "top",
+              formatter: "{c} m",
+              backgroundColor: "rgba(28,152,232,.2)",
+              padding: 6
+            }
+          },
+          {
+            name: "占位背景",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                show: true,
+                color: "#000",
+                opacity: 0
+              }
+            },
+            silent: true,
+            barWidth: "50%",
+            data: weekMaxData,
+            animation: false
+          },
+          
+        ]
+      };
+
+      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/views/bottomLeft.vue b/src/views/bottomLeft.vue
index e93a18e..01d9284 100644
--- a/src/views/bottomLeft.vue
+++ b/src/views/bottomLeft.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="bottomLeft">
-    <div class>
+    <div class="bg-color-black ">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-bar"></icon>
@@ -33,12 +33,12 @@ export default {
 
 <style lang="scss">
 #bottomLeft {
-  padding: 1rem;
-  height: 410px;
+  padding: 1.5rem 1rem;
+  height: 520px;
   min-width: 300px;
   border-radius: 5px;
   .bg-color-black {
-    height: 385px;
+    height: 485px;
     border-radius: 10px;
   }
   .text {
diff --git a/src/views/bottomRight.vue b/src/views/bottomRight.vue
new file mode 100644
index 0000000..51b303f
--- /dev/null
+++ b/src/views/bottomRight.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-area"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <bottomRightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    bottomRightChart
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#bottomRight {
+  padding: 1rem 1rem 0rem;
+  height: 520px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 495px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  } //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 10px;
+  }
+  .chart-box {
+    margin-top: 1rem;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index e85933a..cd5ca12 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,7 +2,7 @@
   <div id="index">
     <dv-full-screen-container class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
-      <div class="host-body">
+      <div v-else class="host-body">
         <div class="d-flex jc-center">
           <dv-decoration-10 style="width:33.3%;height:5px;" />
           <div class="d-flex jc-center">
@@ -83,10 +83,12 @@
 
           <!-- 第四行数据 -->
           <div class="bototm-box">
-            <dv-border-box-1>
+            <dv-border-box-13>
               <bottomLeft />
-            </dv-border-box-1>
-            <div>2</div>
+            </dv-border-box-13>
+            <dv-border-box-12>
+              <bottomRight />
+            </dv-border-box-12>
           </div>
         </div>
       </div>
@@ -101,10 +103,11 @@ import centreRight1 from "./centreRight1";
 import centreRight2 from "./centreRight2";
 import center from "./center";
 import bottomLeft from "./bottomLeft";
+import bottomRight from "./bottomRight";
 export default {
   data() {
     return {
-      loading: false
+      loading: true
     };
   },
   components: {
@@ -113,7 +116,8 @@ export default {
     centreRight1,
     centreRight2,
     center,
-    bottomLeft
+    bottomLeft,
+    bottomRight
   },
   mounted() {
     this.cancelLoading();