From 88510d48f3caf17152fd53ba53debb230fc2ccfc Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sat, 20 Feb 2021 22:21:24 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.02.20:=E6=96=B0=E5=A2=9E=E5=A4=A7?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=9B=BE=E8=A1=A8=E7=95=8C=E9=9D=A2=E3=80=81?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E6=97=B6?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E4=B8=8D=E7=BD=AE=E9=A1=B6=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-admin-wonderful-next/package.json         |   4 +-
 vue-admin-wonderful-next/src/router/index.ts  |   2 +-
 .../src/theme/element.scss                    |  18 +-
 .../src/theme/media/chart.scss                |  90 ++++
 .../src/theme/media/media.scss                |   1 +
 .../src/utils/setIconfont.ts                  |   2 +-
 .../src/views/chart/chart.scss                | 430 ++++++++++++++++
 .../src/views/chart/chart.ts                  |  78 +++
 .../src/views/chart/head.vue                  | 117 +++++
 .../src/views/chart/index.vue                 | 467 +++++++++++++++++-
 .../src/views/home/index.vue                  |  13 +-
 .../src/views/layout/component/main.vue       |   1 +
 .../src/views/layout/main/defaults.vue        |  14 +-
 13 files changed, 1214 insertions(+), 23 deletions(-)
 create mode 100644 vue-admin-wonderful-next/src/theme/media/chart.scss
 create mode 100644 vue-admin-wonderful-next/src/views/chart/chart.scss
 create mode 100644 vue-admin-wonderful-next/src/views/chart/chart.ts
 create mode 100644 vue-admin-wonderful-next/src/views/chart/head.vue

diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index 0c786b3..45c6dd0 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/vue-admin-wonderful-next/package.json
@@ -7,6 +7,8 @@
   },
   "dependencies": {
     "clipboard": "^2.0.6",
+    "echarts": "^5.0.2",
+    "echarts-wordcloud": "^2.0.0",
     "element-plus": "^1.0.2-beta.32",
     "mitt": "^2.1.0",
     "nprogress": "^0.2.0",
@@ -29,4 +31,4 @@
     "typescript": "^4.1.5",
     "vite": "^2.0.0-beta.69"
   }
-}
\ No newline at end of file
+}
diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts
index 27d5bf9..3fcc2fd 100644
--- a/vue-admin-wonderful-next/src/router/index.ts
+++ b/vue-admin-wonderful-next/src/router/index.ts
@@ -183,7 +183,7 @@ export const dynamicRoutes = [
                 isAffix: false,
                 isIframe: false,
                 auth: ['admin', 'test'],
-                icon: 'iconfont icon-xitongshezhi'
+                icon: 'iconfont icon-caidan'
             },
             children: [
                 {
diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss
index e034867..7387c6c 100644
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/vue-admin-wonderful-next/src/theme/element.scss
@@ -498,33 +498,33 @@
   @include Tag(danger, whites, danger-light-3);
 }
 
-/* Tag 标签
+/* Progress 进度条
 ------------------------------- */
 // primary
 .el-progress-bar__inner {
-  background-color: set-color(primary);
+  background-color: set-color(primary) !important;
 }
 // success
 .el-progress.is-success .el-progress-bar__inner {
-  background-color: set-color(success);
+  background-color: set-color(success) !important;
 }
 .el-progress.is-success .el-progress__text {
-  color: set-color(success);
+  color: set-color(success) !important;
 }
 // warning
 .el-progress.is-warning .el-progress-bar__inner {
-  background-color: set-color(warning);
+  background-color: set-color(warning) !important;
 }
 .el-progress.is-warning .el-progress__text {
-  color: set-color(warning);
+  color: set-color(warning) !important;
 }
 // danger
 .el-badge__content,
 .el-progress.is-exception .el-progress-bar__inner {
-  background-color: set-color(danger);
+  background-color: set-color(danger) !important;
 }
 .el-progress.is-exception .el-progress__text {
-  color: set-color(danger);
+  color: set-color(danger) !important;
 }
 
 /* Pagination 分页
@@ -920,7 +920,7 @@
   background-color: set-color(primary-light-9);
 }
 
-/* Tag 标签
+/* Backtop 回到顶部
 ------------------------------- */
 .el-backtop {
   color: set-color(primary);
diff --git a/vue-admin-wonderful-next/src/theme/media/chart.scss b/vue-admin-wonderful-next/src/theme/media/chart.scss
new file mode 100644
index 0000000..0787568
--- /dev/null
+++ b/vue-admin-wonderful-next/src/theme/media/chart.scss
@@ -0,0 +1,90 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+  .big-data-down-left {
+    width: 100% !important;
+    flex-direction: unset !important;
+    flex-wrap: wrap;
+    .flex-warp-item {
+      min-height: 196.24px;
+      padding: 0 7.5px 15px 15px !important;
+      .flex-warp-item-box {
+        border: none !important;
+        border-bottom: 1px solid #ebeef5 !important;
+      }
+    }
+  }
+  .big-data-down-center {
+    width: 100% !important;
+    .big-data-down-center-one,
+    .big-data-down-center-two {
+      min-height: 196.24px;
+      padding-left: 15px !important;
+      .big-data-down-center-one-content {
+        border: none !important;
+        border-bottom: 1px solid #ebeef5 !important;
+      }
+      .flex-warp-item-box {
+        @extend .big-data-down-center-one-content;
+      }
+    }
+  }
+  .big-data-down-right {
+    .flex-warp-item {
+      &:nth-of-type(2) {
+        padding-left: 15px !important;
+      }
+      &:last-of-type {
+        .flex-warp-item-box {
+          border: none !important;
+        }
+      }
+    }
+  }
+}
+
+/* 页面宽度大于768px小于1200px
+------------------------------- */
+@media screen and (min-width: $sm) and (max-width: $lg) {
+  .chart-warp-bottom {
+    .big-data-down-left {
+      width: 50% !important;
+    }
+    .big-data-down-center {
+      width: 50% !important;
+    }
+    .big-data-down-right {
+      .flex-warp-item {
+        width: 50% !important;
+        &:nth-of-type(2) {
+          padding-left: 7.5px !important;
+        }
+      }
+    }
+  }
+}
+
+/* 页面宽度小于1200px
+------------------------------- */
+@media screen and (max-width: $lg) {
+  .chart-warp-top {
+    .up-left {
+      display: none;
+    }
+  }
+  .chart-warp-bottom {
+    overflow-y: auto !important;
+    flex-wrap: wrap;
+    .big-data-down-right {
+      width: 100% !important;
+      flex-direction: unset !important;
+      flex-wrap: wrap;
+      .flex-warp-item {
+        min-height: 196.24px;
+        padding: 0 7.5px 15px 15px !important;
+      }
+    }
+  }
+}
diff --git a/vue-admin-wonderful-next/src/theme/media/media.scss b/vue-admin-wonderful-next/src/theme/media/media.scss
index 9614ac9..fe4c4b3 100644
--- a/vue-admin-wonderful-next/src/theme/media/media.scss
+++ b/vue-admin-wonderful-next/src/theme/media/media.scss
@@ -4,3 +4,4 @@
 @import './personal.scss';
 @import './tagsView.scss';
 @import './home.scss';
+@import './chart.scss';
diff --git a/vue-admin-wonderful-next/src/utils/setIconfont.ts b/vue-admin-wonderful-next/src/utils/setIconfont.ts
index 175a4bf..bbf455b 100644
--- a/vue-admin-wonderful-next/src/utils/setIconfont.ts
+++ b/vue-admin-wonderful-next/src/utils/setIconfont.ts
@@ -1,7 +1,7 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = ['//at.alicdn.com/t/font_2298093_ri4yz1f9b7o.css']
 // 第三方 js url
-const jsCdnUrlList: Array<string> = ['https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js']
+const jsCdnUrlList: Array<string> = []
 
 // 动态设置字体图标
 export function setCssCdn() {
diff --git a/vue-admin-wonderful-next/src/views/chart/chart.scss b/vue-admin-wonderful-next/src/views/chart/chart.scss
new file mode 100644
index 0000000..6a6fd9c
--- /dev/null
+++ b/vue-admin-wonderful-next/src/views/chart/chart.scss
@@ -0,0 +1,430 @@
+.chart-scrollbar {
+  .chart-warp {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .chart-warp-bottom {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      .big-data-down-left,
+      .big-data-down-right {
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        .flex-warp-item {
+          padding: 0 7.5px 15px 15px;
+          width: 100%;
+          height: 33.33%;
+          .flex-warp-item-box {
+            width: 100%;
+            height: 100%;
+            background: white;
+            border: 1px solid #ebeef5;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            transition: all ease 0.3s;
+            &:hover {
+              box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+              transition: all ease 0.3s;
+            }
+            .flex-title {
+              margin-bottom: 15px;
+              display: flex;
+              justify-content: space-between;
+              .flex-title-small {
+                font-size: 12px;
+              }
+            }
+            .flex-content {
+              flex: 1;
+              font-size: 12px;
+            }
+            .flex-content-overflow {
+              overflow: hidden;
+            }
+          }
+        }
+      }
+      .big-data-down-left {
+        color: #303133;
+        .sky {
+          display: flex;
+          align-items: center;
+          .sky-left {
+            font-size: 30px;
+          }
+          .sky-center {
+            flex: 1;
+            overflow: hidden;
+            padding: 0 10px;
+            font {
+              margin-right: 15px;
+            }
+            .span {
+              background: #22bc76;
+              border-radius: 2px;
+              padding: 0 5px;
+              color: white;
+            }
+          }
+          .sky-right {
+            span {
+              font-size: 30px;
+            }
+            font {
+              font-size: 20px;
+            }
+          }
+        }
+        .sky-dd {
+          .sky-dl {
+            display: flex;
+            align-items: center;
+            height: 28px;
+            overflow: hidden;
+            div {
+              flex: 1;
+              overflow: hidden;
+              i {
+                font-size: 14px;
+              }
+            }
+            .tip {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+          .sky-dl-first {
+            color: var(--color-primary);
+          }
+        }
+        .d-states {
+          display: flex;
+          .d-states-item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            i {
+              font-size: 20px;
+              height: 33px;
+              width: 33px;
+              line-height: 33px;
+              text-align: center;
+              border-radius: 100%;
+              flex-shrink: 1;
+              color: #ffffff;
+            }
+            .i-bg1 {
+              background: #22bc76;
+            }
+            .i-bg2 {
+              background: #e2356d;
+            }
+            .i-bg3 {
+              background: #43bbef;
+            }
+            .d-states-flex {
+              overflow: hidden;
+              padding: 0 10px 0;
+              .d-states-item-label {
+                color: var(--color-primary);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .d-states-item-value {
+                font-size: 14px;
+                text-align: center;
+                margin-top: 3px;
+                color: var(--color-primary);
+              }
+            }
+          }
+        }
+        .d-btn {
+          margin-top: 5px;
+          .d-btn-item {
+            border: 1px solid var(--color-primary);
+            display: flex;
+            width: 100%;
+            border-radius: 35px;
+            align-items: center;
+            padding: 5px;
+            margin-top: 15px;
+            cursor: pointer;
+            transition: all ease 0.3s;
+            color: var(--color-primary);
+            .d-btn-item-left {
+              font-size: 20px;
+              border: 1px solid var(--color-primary);
+              width: 25px;
+              height: 25px;
+              line-height: 25px;
+              border-radius: 100%;
+              text-align: center;
+              font-size: 14px;
+            }
+            .d-btn-item-center {
+              padding: 0 10px;
+              flex: 1;
+            }
+            .d-btn-item-eight {
+              text-align: right;
+              padding-right: 10px;
+            }
+          }
+        }
+      }
+      .big-data-down-center {
+        width: 40%;
+        display: flex;
+        flex-direction: column;
+        .big-data-down-center-one {
+          height: 66.67%;
+          padding: 0 7.5px 15px;
+          .big-data-down-center-one-content {
+            height: 100%;
+            background: white;
+            padding: 15px;
+            border: 1px solid #ebeef5;
+            border-radius: 4px;
+            transition: all ease 0.3s;
+            &:hover {
+              box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+              transition: all ease 0.3s;
+            }
+          }
+        }
+        .big-data-down-center-two {
+          padding: 0 7.5px 15px;
+          height: 33.33%;
+          .flex-warp-item-box {
+            width: 100%;
+            height: 100%;
+            background: white;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            border: 1px solid #ebeef5;
+            border-radius: 4px;
+            transition: all ease 0.3s;
+            &:hover {
+              box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+              transition: all ease 0.3s;
+            }
+            .flex-title {
+              margin-bottom: 15px;
+              color: #303133;
+              display: flex;
+              justify-content: space-between;
+              .flex-title-small {
+                font-size: 12px;
+              }
+            }
+            .flex-content {
+              flex: 1;
+              font-size: 12px;
+              display: flex;
+              height: calc(100% - 30px);
+              .flex-content-left {
+                display: flex;
+                flex-wrap: wrap;
+                width: 120px;
+                height: 100%;
+                .monitor-item {
+                  width: 50%;
+                  display: flex;
+                  align-items: center;
+                  .monitor-wave {
+                    cursor: pointer;
+                    width: 40px;
+                    height: 40px;
+                    position: relative;
+                    background-color: var(--color-primary);
+                    border-radius: 50%;
+                    overflow: hidden;
+                    text-align: center;
+                    &::before,
+                    &::after {
+                      content: '';
+                      position: absolute;
+                      left: 50%;
+                      width: 40px;
+                      height: 40px;
+                      background: #f4f4f4;
+                      animation: roateOne 10s linear infinite;
+                      transform: translateX(-50%);
+                      z-index: 1;
+                    }
+                    &::before {
+                      bottom: 10px;
+                      border-radius: 60%;
+                    }
+                    &::after {
+                      bottom: 8px;
+                      opacity: 0.7;
+                      border-radius: 37%;
+                    }
+                    .monitor-z-index {
+                      position: relative;
+                      z-index: 2;
+                      color: var(--color-primary);
+                      display: flex;
+                      align-items: center;
+                      height: 100%;
+                      justify-content: center;
+                    }
+                  }
+                  @keyframes roateOne {
+                    0% {
+                      transform: translate(-50%, 0) rotateZ(0deg);
+                    }
+                    50% {
+                      transform: translate(-50%, -2%) rotateZ(180deg);
+                    }
+                    100% {
+                      transform: translate(-50%, 0%) rotateZ(360deg);
+                    }
+                  }
+                  .monitor-active {
+                    background-color: #22bc76;
+                    .monitor-z-index {
+                      color: #22bc76;
+                    }
+                  }
+                }
+              }
+              .flex-content-right {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+      .big-data-down-right {
+        .flex-warp-item {
+          padding: 0 15px 15px 7.5px;
+          .flex-content {
+            display: flex;
+            flex-direction: column;
+            .task {
+              display: flex;
+              height: 45px;
+              .task-item {
+                flex: 1;
+                color: #ffffff;
+                display: flex;
+                justify-content: center;
+                .task-item-box {
+                  position: relative;
+                  width: 45px;
+                  height: 45px;
+                  overflow: hidden;
+                  border-radius: 100%;
+                  z-index: 0;
+                  display: flex;
+                  align-items: center;
+                  flex-direction: column;
+                  justify-content: center;
+                  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    z-index: -2;
+                    left: -50%;
+                    top: -50%;
+                    width: 200%;
+                    height: 200%;
+                    background-repeat: no-repeat;
+                    background-size: 50% 50%, 50% 50%;
+                    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+                    background-image: linear-gradient(#19d4ae, #19d4ae),
+                      linear-gradient(#5ab1ef, #5ab1ef),
+                      linear-gradient(#fa6e86, #fa6e86),
+                      linear-gradient(#ffb980, #ffb980);
+                    animation: rotate 2s linear infinite;
+                  }
+                  &::after {
+                    content: '';
+                    position: absolute;
+                    z-index: -1;
+                    left: 1px;
+                    top: 1px;
+                    width: calc(100% - 2px);
+                    height: calc(100% - 2px);
+                    border-radius: 100%;
+                  }
+                  .task-item-value {
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: bold;
+                  }
+                  .task-item-label {
+                    text-align: center;
+                  }
+                }
+                .task1 {
+                  &::after {
+                    background: #5492be;
+                  }
+                }
+                .task2 {
+                  &::after {
+                    background: #43a177;
+                  }
+                }
+                .task3 {
+                  &::after {
+                    background: #a76077;
+                  }
+                }
+              }
+              .task-first-item {
+                flex-direction: column;
+                text-align: center;
+                color: var(--color-primary);
+                .task-first {
+                  font-size: 20px;
+                }
+              }
+            }
+            .progress {
+              color: #303133;
+              display: flex;
+              flex-direction: column;
+              flex: 1;
+              justify-content: space-between;
+              margin-top: 15px;
+              .progress-item {
+                height: 33.33%;
+                display: flex;
+                align-items: center;
+                .progress-box {
+                  flex: 1;
+                  width: 100%;
+                  margin-left: 10px;
+                  ::v-deep(.el-progress__text) {
+                    color: #303133;
+                    font-size: 12px !important;
+                    text-align: right;
+                  }
+                  ::v-deep(.el-progress-bar__outer) {
+                    background-color: rgba(0, 0, 0, 0.1) !important;
+                  }
+                  ::v-deep(.el-progress-bar) {
+                    margin-right: -22px !important;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/vue-admin-wonderful-next/src/views/chart/chart.ts b/vue-admin-wonderful-next/src/views/chart/chart.ts
new file mode 100644
index 0000000..f9b79b7
--- /dev/null
+++ b/vue-admin-wonderful-next/src/views/chart/chart.ts
@@ -0,0 +1,78 @@
+// sky 天气
+export const skyList = [
+    {
+        v1: "时间",
+        v2: "天气",
+        v3: "温度",
+        v5: "降水",
+        v7: "风力",
+        type: "title",
+    },
+    {
+        v1: "今天",
+        v2: "el-icon-cloudy-and-sunny",
+        v3: "20°/26°",
+        v5: "50%",
+        v7: "13m/s",
+    },
+    {
+        v1: "明天",
+        v2: "el-icon-lightning",
+        v3: "20°/26°",
+        v5: "50%",
+        v7: "13m/s",
+    },
+];
+
+// 当前设置状态
+export const dBtnList = [
+    {
+        v2: "阳光玫瑰种植",
+        v3: "126天",
+        v4: "设备在线",
+    }
+];
+
+// 当前设备监测
+export const chartData4List = [
+    {
+        label: "温度",
+    },
+    {
+        label: "光照",
+    },
+    {
+        label: "湿度",
+    },
+    {
+        label: "风力",
+    }
+];
+
+// 3DEarth 地图周围按钮组
+export const earth3DBtnList = [
+    {
+        topLevelClass: "fixed-top",
+        icon: "el-icon-s-marketing",
+        label: "环境监测",
+        type: 0,
+    },
+    {
+        topLevelClass: "fixed-right",
+        icon: "el-icon-s-cooperation",
+        label: "精准管理",
+        type: 1,
+    },
+    {
+        topLevelClass: "fixed-bottom",
+        icon: "el-icon-s-order",
+        label: "数据报表",
+        type: 2,
+    },
+    {
+        topLevelClass: "fixed-left",
+        icon: "el-icon-s-claim",
+        label: "产品追溯",
+        type: 3,
+    },
+];
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/chart/head.vue b/vue-admin-wonderful-next/src/views/chart/head.vue
new file mode 100644
index 0000000..fd9bfab
--- /dev/null
+++ b/vue-admin-wonderful-next/src/views/chart/head.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="big-data-up mb15">
+    <div class="up-left">
+      <i class="el-icon-time mr5"></i>
+      <span>{{ time.txt }}</span>
+    </div>
+    <div class="up-center">
+      <span>智慧农业系统平台</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue'
+import { formatDate } from "/@/utils/formatTime"
+export default {
+  name: "chartHead",
+  setup() {
+    const state = reactive({
+      time: {
+        txt: "",
+        fun: null,
+      }
+    })
+    // 初始化时间
+    const initTime = () => {
+      state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
+      state.time.fun = setInterval(() => {
+        state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
+      }, 1000);
+    }
+    // 页面加载前
+    onBeforeMount(() => {
+      initTime()
+    })
+    // 页面卸载时
+    onUnmounted(() => {
+      clearInterval(state.time.fun)
+    })
+    return {
+      ...toRefs(state)
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.big-data-up {
+  height: 55px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  color: var(--color-primary);
+  overflow: hidden;
+  position: relative;
+  .up-left {
+    position: absolute;
+  }
+  .up-center {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 18px;
+    letter-spacing: 5px;
+    background-image: -webkit-linear-gradient(
+      left,
+      var(--color-primary),
+      var(--color-primary-light-1) 25%,
+      var(--color-primary) 50%,
+      var(--color-primary-light-1) 75%,
+      var(--color-primary)
+    );
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-size: 200% 100%;
+    -webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
+    animation: masked-animation-data-v-b02d8052 4s linear infinite;
+    -webkit-box-reflect: below -2px -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        from(transparent),
+        to(hsla(0, 0%, 100%, 0.1))
+      );
+    position: relative;
+    @keyframes masked-animation {
+      0% {
+        background-position: 0 0;
+      }
+      100% {
+        background-position: -100% 0;
+      }
+    }
+    position: relative;
+    &::after {
+      content: "";
+      width: 250px;
+      position: absolute;
+      bottom: -15px;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 1px transparent solid;
+      border-image: linear-gradient(
+          to right,
+          var(--color-primary-light-9),
+          var(--color-primary)
+        )
+        1 10;
+    }
+    span {
+      cursor: pointer;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/chart/index.vue b/vue-admin-wonderful-next/src/views/chart/index.vue
index 3c386c6..634c4fb 100644
--- a/vue-admin-wonderful-next/src/views/chart/index.vue
+++ b/vue-admin-wonderful-next/src/views/chart/index.vue
@@ -1,21 +1,476 @@
 <template>
-  <div>
-    chartIndex
-    <el-input v-model="val"></el-input>
+  <div class="chart-scrollbar" :style="{height: `calc(100vh - ${initTagViewHeight}`}">
+    <div class="chart-warp layout-view-bg-white">
+      <div class="chart-warp-top">
+        <ChartHead />
+      </div>
+      <div class="chart-warp-bottom">
+        <!-- 左边 -->
+        <div class="big-data-down-left">
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">天气预报</div>
+              <div class="flex-content">
+                <div class="sky">
+                  <i class="sky-left el-icon-cloudy-and-sunny"></i>
+                  <div class="sky-center">
+                    <div class="mb2">
+                      <span>多云转晴</span>
+                      <span>东南风</span>
+                      <span class="span ml5">良</span>
+                    </div>
+                  </div>
+                  <div class="sky-right">
+                    <span>25</span>
+                    <span>°C</span>
+                  </div>
+                </div>
+                <div class="sky-dd">
+                  <div class="sky-dl" v-for="(v,k) in skyList" :key="k" :class="{'sky-dl-first': k === 1}">
+                    <div>{{v.v1}}</div>
+                    <div v-if="v.type === 'title'">{{v.v2}}</div>
+                    <div v-else>
+                      <i :class="v.v2"></i>
+                    </div>
+                    <div>{{v.v3}}</div>
+                    <div class="tip">{{v.v5}}</div>
+                    <div>{{v.v7}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">当前设备状态</div>
+              <div class="flex-content flex-content-overflow">
+                <div class="d-states">
+                  <div class="d-states-item">
+                    <i class="el-icon-odometer i-bg1"></i>
+                    <div class="d-states-flex">
+                      <div class="d-states-item-label">设备</div>
+                      <div class="d-states-item-value">99</div>
+                    </div>
+                  </div>
+                  <div class="d-states-item">
+                    <i class="el-icon-first-aid-kit i-bg2"></i>
+                    <div class="d-states-flex">
+                      <div class="d-states-item-label">预警</div>
+                      <div class="d-states-item-value">10</div>
+                    </div>
+                  </div>
+                  <div class="d-states-item">
+                    <i class="el-icon-video-play i-bg3"></i>
+                    <div class="d-states-flex">
+                      <div class="d-states-item-label">运行</div>
+                      <div class="d-states-item-value">20</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="d-btn">
+                  <div class="d-btn-item" v-for="(v,k) in dBtnList" :key="k">
+                    <i class="d-btn-item-left el-icon-money"></i>
+                    <div class="d-btn-item-center">
+                      <div>{{v.v2}}|{{v.v3}}</div>
+                    </div>
+                    <div class="d-btn-item-eight">{{v.v4}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">近30天预警总数</div>
+              <div class="flex-content">
+                <div id="chartsWarning" style="height:100%;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中间 -->
+        <div class="big-data-down-center">
+          <div class="big-data-down-center-one">
+            <div class="big-data-down-center-one-content">
+              <div id="chartsCenterOne" style="height:100%;"></div>
+            </div>
+          </div>
+          <div class="big-data-down-center-two">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">
+                <span>当前设备监测</span>
+                <span class="flex-title-small">单位：次</span>
+              </div>
+              <div class="flex-content">
+                <div class="flex-content-left">
+                  <div class="monitor-item" v-for="(v,k) in chartData4List" :key="k">
+                    <div class="monitor-wave">
+                      <div class="monitor-z-index">
+                        <div class="monitor-item-label">{{v.label}}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex-content-right">
+                  <div id="chartsMonitor" style="height:100%;"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右边 -->
+        <div class="big-data-down-right">
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">
+                <span>近7天产品追溯扫码统计</span>
+                <span class="flex-title-small">单位：次</span>
+              </div>
+              <div class="flex-content">
+                <div id="chartsSevenDays" style="height:100%;"></div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">当前任务统计</div>
+              <div class="flex-content">
+                <div class="task">
+                  <div class="task-item task-first-item">
+                    <div class="task-item-value task-first">25</div>
+                    <div class="task-item-label">待办任务</div>
+                  </div>
+                  <div class="task-item">
+                    <div class="task-item-box task1">
+                      <div class="task-item-value">12</div>
+                      <div class="task-item-label">施肥</div>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <div class="task-item-box task2">
+                      <div class="task-item-value">3</div>
+                      <div class="task-item-label">施药</div>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <div class="task-item-box task3">
+                      <div class="task-item-value">5</div>
+                      <div class="task-item-label">农事</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="progress">
+                  <div class="progress-item">
+                    <span>施肥率</span>
+                    <div class="progress-box">
+                      <el-progress :percentage="70" color="#43bdf0"></el-progress>
+                    </div>
+                  </div>
+                  <div class="progress-item">
+                    <span>施药率</span>
+                    <div class="progress-box">
+                      <el-progress :percentage="36" color="#43bdf0"></el-progress>
+                    </div>
+                  </div>
+                  <div class="progress-item">
+                    <span>农事率</span>
+                    <div class="progress-box">
+                      <el-progress :percentage="91" color="#43bdf0"></el-progress>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-warp-item">
+            <div class="flex-warp-item-box">
+              <div class="flex-title">
+                <span>近7天投入品记录</span>
+                <span class="flex-title-small">单位：件</span>
+              </div>
+              <div class="flex-content">
+                <div id="chartsInvestment" style="height:100%;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive, computed, onMounted } from "vue";
+import { useStore } from "/@/store/index.ts";
+import ChartHead from "/@/views/chart/head.vue";
+import * as echarts from "echarts";
+import "echarts-wordcloud";
+import {
+  skyList,
+  dBtnList,
+  chartData4List,
+  earth3DBtnList,
+} from "/@/views/chart/chart.ts";
 export default {
   name: "chartIndex",
+  components: { ChartHead },
   setup() {
+    const store = useStore();
     const state = reactive({
-      val: "",
+      tagViewHeight: "",
+      skyList,
+      dBtnList,
+      chartData4List,
+      earth3DBtnList,
+    });
+    // 设置主内容的高度
+    const initTagViewHeight = computed(() => {
+      let { isTagsview } = store.state.themeConfig;
+      if (isTagsview) return `114px`;
+      else return `80px`;
+    });
+    // 初始化中间图表1
+    const initChartsCenterOne = () => {
+      const myChart = echarts.init(document.getElementById("chartsCenterOne"));
+      const option = {
+        grid: {
+          top: 15,
+          right: 15,
+          bottom: 20,
+          left: 30,
+        },
+        tooltip: {},
+        series: [
+          {
+            type: "wordCloud",
+            sizeRange: [12, 40],
+            rotationRange: [0, 0],
+            rotationStep: 45,
+            gridSize: Math.random() * 20 + 5,
+            shape: "circle",
+            width: "100%",
+            height: "100%",
+            textStyle: {
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              color: function () {
+                return `rgb(${[
+                  Math.round(Math.random() * 160),
+                  Math.round(Math.random() * 160),
+                  Math.round(Math.random() * 160),
+                ].join(",")})`;
+              },
+            },
+            data: [
+              { name: "vue-admin-wonderful-next", value: 520 },
+              { name: "lyt", value: 520 },
+              { name: "wonderful", value: 520 },
+              { name: "智慧农业", value: 520 },
+              { name: "男神", value: 2.64 },
+              { name: "好身材", value: 4.03 },
+              { name: "校草", value: 24.95 },
+              { name: "酷", value: 4.04 },
+              { name: "时尚", value: 5.27 },
+              { name: "阳光活力", value: 5.8 },
+              { name: "初恋", value: 3.09 },
+              { name: "英俊潇洒", value: 24.71 },
+              { name: "霸气", value: 6.33 },
+              { name: "腼腆", value: 2.55 },
+              { name: "蠢萌", value: 3.88 },
+              { name: "青春", value: 8.04 },
+              { name: "网红", value: 5.87 },
+              { name: "萌", value: 6.97 },
+              { name: "认真", value: 2.53 },
+              { name: "古典", value: 2.49 },
+              { name: "温柔", value: 3.91 },
+              { name: "有个性", value: 3.25 },
+              { name: "可爱", value: 9.93 },
+              { name: "幽默诙谐", value: 3.65 },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 初始化近7天产品追溯扫码统计
+    const initChartsSevenDays = () => {
+      const myChart = echarts.init(document.getElementById("chartsSevenDays"));
+      const option = {
+        grid: {
+          top: 15,
+          right: 15,
+          bottom: 20,
+          left: 30,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "邮件营销",
+            type: "line",
+            stack: "总量",
+            data: [12, 32, 11, 34, 90, 23, 21],
+          },
+          {
+            name: "联盟广告",
+            type: "line",
+            stack: "总量",
+            data: [22, 82, 91, 24, 90, 30, 30],
+          },
+          {
+            name: "视频广告",
+            type: "line",
+            stack: "总量",
+            data: [50, 32, 18, 14, 90, 30, 50],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 初始化近30天预警总数
+    const initChartsWarning = () => {
+      const myChart = echarts.init(document.getElementById("chartsWarning"));
+      const option = {
+        grid: {
+          top: 50,
+          right: 20,
+          bottom: 30,
+          left: 30,
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "面积模式",
+            type: "pie",
+            radius: [20, 50],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 40, name: "监测设备预警" },
+              { value: 38, name: "天气预警" },
+              { value: 32, name: "任务预警" },
+              { value: 30, name: "病虫害预警" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 初始化当前设备监测
+    const initChartsMonitor = () => {
+      const myChart = echarts.init(document.getElementById("chartsMonitor"));
+      const option = {
+        grid: {
+          top: 15,
+          right: 15,
+          bottom: 20,
+          left: 30,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            itemStyle: {
+              color: "#289df5",
+              borderColor: "#289df5",
+              areaStyle: {
+                type: "default",
+                opacity: 0.1,
+              },
+            },
+            data: [20, 32, 31, 34, 12, 13, 20],
+            type: "line",
+            areaStyle: {},
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 初始化近7天投入品记录
+    const initChartsInvestment = () => {
+      const myChart = echarts.init(document.getElementById("chartsInvestment"));
+      const option = {
+        grid: {
+          top: 15,
+          right: 15,
+          bottom: 20,
+          left: 30,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [10, 20, 15, 80, 70, 11, 30],
+            type: "bar",
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initChartsCenterOne();
+      initChartsSevenDays();
+      initChartsWarning();
+      initChartsMonitor();
+      initChartsInvestment();
     });
     return {
+      initTagViewHeight,
       ...toRefs(state),
     };
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+@import "./chart.scss";
+</style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/home/index.vue b/vue-admin-wonderful-next/src/views/home/index.vue
index d6e5eba..0c13cc6 100644
--- a/vue-admin-wonderful-next/src/views/home/index.vue
+++ b/vue-admin-wonderful-next/src/views/home/index.vue
@@ -28,7 +28,7 @@
     </el-row>
     <el-row :gutter="15">
       <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb15">
-        <el-card shadow="hover" header="实验室使用情况">
+        <el-card shadow="hover" header="商品销售情况">
           <div id="homeLaboratory" style="height:200px;"></div>
         </el-card>
       </el-col>
@@ -50,8 +50,8 @@
     </el-row>
     <el-row :gutter="15">
       <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-warning-media">
-        <el-card shadow="hover" header="预警信息">
-          <el-table :data="tableData.data" style="width: 100%;" height="200" stripe>
+        <el-card shadow="hover" header="预警信息" class="home-warning-card">
+          <el-table :data="tableData.data" style="width: 100%;" stripe>
             <el-table-column prop="date" label="时间"></el-table-column>
             <el-table-column prop="name" label="实验室名称"></el-table-column>
             <el-table-column prop="address" label="报警内容"></el-table-column>
@@ -95,6 +95,7 @@
 
 <script lang="ts">
 import { toRefs, reactive, onMounted } from "vue";
+import * as echarts from "echarts";
 import { topCardItemList, environmentList, activitiesList } from "./mock.ts";
 export default {
   name: "home",
@@ -329,6 +330,12 @@ export default {
       }
     }
   }
+  .home-warning-card {
+    height: 292px;
+    ::v-deep(.el-card) {
+      height: 100%;
+    }
+  }
   .home-dynamic {
     height: 200px;
     .home-dynamic-item {
diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue
index 4a1c749..d3e57b8 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@@ -72,6 +72,7 @@ export default defineComponent({
       () => route.path,
       () => {
         initCurrentRouteMeta(route.meta);
+        proxy.$refs.layoutScrollbarRef.wrap.scrollTop = 0;
       }
     );
     return {
diff --git a/vue-admin-wonderful-next/src/views/layout/main/defaults.vue b/vue-admin-wonderful-next/src/views/layout/main/defaults.vue
index 0d9fbef..2849474 100644
--- a/vue-admin-wonderful-next/src/views/layout/main/defaults.vue
+++ b/vue-admin-wonderful-next/src/views/layout/main/defaults.vue
@@ -3,7 +3,7 @@
     <Aside />
     <el-container class="flex-center layout-backtop">
       <Header v-if="isFixedHeader" />
-      <el-scrollbar>
+      <el-scrollbar ref="layoutDefaultsScrollbarRef">
         <Header v-if="!isFixedHeader" />
         <Main />
       </el-scrollbar>
@@ -13,7 +13,8 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, getCurrentInstance, watch } from 'vue'
+import { useRoute } from "vue-router";
 import { useStore } from "/@/store/index.ts";
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
@@ -22,10 +23,19 @@ export default {
   name: 'layoutDefaults',
   components: { Aside, Header, Main },
   setup() {
+    const { proxy } = getCurrentInstance();
     const store = useStore();
+    const route = useRoute();
     const isFixedHeader = computed(() => {
       return store.state.themeConfig.isFixedHeader;
     });
+    // 监听路由的变化
+    watch(
+      () => route.path,
+      () => {
+        proxy.$refs.layoutDefaultsScrollbarRef.wrap.scrollTop = 0;
+      }
+    );
     return {
       isFixedHeader
     }