2d数据图片修改为最多3张

vue/package-lock.json

@@ -8,12 +8,14 @@
       "name": "pc",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.1.3",
         "core-js": "^3.6.5",
         "dayjs": "^1.11.6",
         "element-ui": "^2.15.10",
         "lodash": "^4.17.21",
         "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
+        "vue-json-excel": "^0.3.0",
         "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
@@ -3214,8 +3216,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -3262,6 +3263,29 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -4408,7 +4432,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5540,7 +5563,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5720,6 +5742,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -6649,7 +6676,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -8769,7 +8795,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8778,7 +8803,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -10642,6 +10666,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -13357,6 +13386,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "dependencies": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "node_modules/vue-lazyload": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
@@ -17070,8 +17107,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.2",
@@ -17106,6 +17142,28 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -18094,7 +18152,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -19019,8 +19076,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "depd": {
       "version": "2.0.0",
@@ -19176,6 +19232,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -19958,8 +20019,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -21667,14 +21727,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -23251,6 +23309,11 @@
         "ipaddr.js": "1.9.1"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -25576,6 +25639,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-lazyload": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",

vue/package.json

@@ -7,12 +7,14 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^1.1.3",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.6",
     "element-ui": "^2.15.10",
     "lodash": "^4.17.21",
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
+    "vue-json-excel": "^0.3.0",
     "vue-lazyload": "^1.3.3",
     "vue-router": "^3.2.0"
   },

vue/src/main.js

@@ -6,7 +6,9 @@ Vue.prototype.dayjs = dayjs
 // 图片查看
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
-
+// 表格导出
+import JsonExcel from 'vue-json-excel'
+Vue.component('downloadExcel', JsonExcel)
 // 图片懒加载
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad, {

vue/src/utils/request.js

@@ -0,0 +1,28 @@
+import {
+  baseURL
+} from "@/utils/api";
+
+import axios from 'axios'
+const http = axios.create({
+  baseURL, // build
+  timeout: 5000
+})
+
+// 请求拦截器
+http.interceptors.request.use(function (config) {
+  config.headers.appId = 'E9A27605CEB3FFAF48F4D7B86858A03D9868419F60B5A45027FB6E6867F4EDA9'
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+// 添加响应拦截器
+http.interceptors.response.use(function (response) {
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export default http

vue/src/views/Goods/components/Three.vue

@@ -163,13 +163,13 @@ export default {
           rowDom.forEach((v) => {
             v.style.pointerEvents = "auto";
           });
-        }, 340);
+        }, 240);
       } else {
         setTimeout(() => {
           rowDom.forEach((v) => {
             v.style.pointerEvents = "none";
           });
-        }, 240);
+        }, 140);
       }
     },
     data() {

vue/src/views/Goods/index.vue

@@ -93,6 +93,13 @@ import { addNumAPI } from "@/utils/api";
 import { goodsData } from "./data";
 import Three from "./components/Three.vue";
 import Tow from "./components/Tow.vue";
+
+
+goodsData['2D'] = goodsData['2D'].map(v => ({
+  ...v,
+  imgNum: v.imgNum && v.imgNum > 3 ? 3 : v.imgNum
+
+}))
 export default {
   name: "Goods",
   //import引入的组件需要注入到对象中才能使用
@@ -120,6 +127,7 @@ export default {
       like: false,
       share: false,
       data: [],
+
     };
   },
   //监听属性 类似于data概念
@@ -127,7 +135,7 @@ export default {
   //监控data中的数据变化
   watch: {
     genre(val) {
-      let temp = goodsData[this.model];
+      let temp = goodsData[this.model]
       if (val === "all") {
         this.data = temp.filter((v) => v.name.includes(this.txt));
       } else {

vue/src/views/LikeNum.vue

@@ -5,18 +5,30 @@
       <div class="allNum">
         <p>
           <span class="all1">总访问量：</span>
-          <span class="num">{{ countVisit }}</span
-          >&emsp;&emsp;
+          <span class="num">{{ countVisit }}</span>&emsp;&emsp;
           <span class="all2">总点赞量：</span>
           <span class="num">{{ countStar }}</span>
         </p>
       </div>
     </div>
+    <!-- 导出按钮 -->
+    <div class="exporeToExBtn">
+      <download-excel :before-generate="derive" class="export-excel-wrapper" :data="json_data" :fields="json_fields"
+        name="数据统计.xls">
+        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+        <div>数据导出</div>
+      </download-excel>
+    </div>
+    <!-- 加载中 -->
+    <div class="loding" v-show="loding">
+      <img src="../assets/img/loading.gif" alt="">
+    </div>
   </div>
 </template>
 
 <script>
 import { baseURL } from "@/utils/api";
+import http from '../utils/request'
 export default {
   name: "LikeNum",
   components: {},
@@ -25,6 +37,22 @@ export default {
     return {
       countStar: 0,
       countVisit: 0,
+      // 导出表格的数据
+      loding: false,
+      json_fields: {
+        '日期': 'day',
+        '访问量': 'pcsVisit',
+        '点赞量': 'pcsStar',
+      },
+      json_data: [],
+      json_meta: [
+        [
+          {
+            ' key ': ' charset ',
+            ' value ': ' utf- 8 '
+          }
+        ]
+      ],
     };
   },
   //监听属性 类似于data概念
@@ -33,6 +61,14 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 点击导出
+    async derive() {
+      this.loding = true
+      let res = await http.post('/api/visit/getReport', { moduleType: "web" })
+      this.json_data = res.data.rankingVisit
+      this.loding = false
+    },
+
     echartsFu(data1, data2, data3) {
       let ecDemo = echarts.init(document.getElementById("echartsBox"));
       let option = {
@@ -168,7 +204,7 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() { },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let dom = document.querySelector("#app");
@@ -176,19 +212,6 @@ export default {
     dom.style.minHeight = "100vh";
     dom.style.overflow = "hidden";
 
-    // 获取当前时间年月日
-    let nowTime = Date.now();
-    let dayTimeNum = 86400000;
-    let obj = {};
-    for (let i =9; i >= 0; i--) {
-      let time = nowTime - dayTimeNum * i;
-      let STime = this.dayjs(time).format("YYYY-MM-DD");
-      obj[STime] = {
-        visitNum: 0,
-        starNum: 0,
-      };
-    }
-
     fetch(`${baseURL}/api/visit/getReport`, {
       method: "post",
       body: JSON.stringify({
@@ -204,24 +227,17 @@ export default {
       .then((res) => res.text()) //请求得到的数据转换为text
       .then((res) => {
         let data = JSON.parse(res);
-        this.countVisit = data.data.countVisit;
-        this.countStar = data.data.countStar;
-        let temp1 = data.data.rankingStar;
-        let temp2 = data.data.rankingVisit;
+        this.countVisit = data.data.pcsVisit;
+        this.countStar = data.data.pcsStar;
         let arr1 = [];
         let arr2 = [];
         let arr3 = [];
-        for (const k in obj) {
-          temp1.forEach((v) => {
-            if (v.day === k) obj[k].starNum = v.pcs;
-          });
-          temp2.forEach((v) => {
-            if (v.day === k) obj[k].visitNum = v.pcs;
-          });
-          arr1.push(k);
-          arr2.push(obj[k].visitNum);
-          arr3.push(obj[k].starNum);
-        }
+        let temp = data.data.rankingVisit.reverse()
+        temp.forEach(v => {
+          arr1.push(v.day)
+          arr2.push(v.pcsVisit)
+          arr3.push(v.pcsStar)
+        })
         arr1.push("");
         arr2.push(0);
         arr3.push(0);
@@ -231,13 +247,13 @@ export default {
         this.echartsFu(arr1, arr2, arr3);
       });
   },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -250,6 +266,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+
   &::after {
     content: "";
     position: absolute;
@@ -258,11 +275,38 @@ export default {
     width: 100%;
     height: 100%;
     z-index: -1;
-    background-image: linear-gradient(
-      rgba(25, 59, 78, 0.8),
-      rgba(20, 44, 57, 0.5)
-    );
+    background-image: linear-gradient(rgba(25, 59, 78, 0.8),
+        rgba(20, 44, 57, 0.5));
   }
+
+  // 导出按钮
+  .exporeToExBtn {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 100px;
+    height: 40px;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, .6);
+    text-align: center;
+    line-height: 40px;
+  }
+
+  // 加载中
+  .loding {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   #echartsBox {
     position: absolute;
     top: 50%;
@@ -272,6 +316,7 @@ export default {
     max-width: 800px;
     height: 500px;
   }
+
   .numBox {
     pointer-events: none;
     position: absolute;
@@ -282,6 +327,7 @@ export default {
     max-width: 800px;
     height: 500px;
     z-index: 10;
+
     .allNum {
       color: #ffd15c;
       position: absolute;
@@ -289,28 +335,34 @@ export default {
       top: 0px;
       z-index: 10;
       font-size: 14px;
-      & > p {
+
+      &>p {
         display: flex;
         align-items: center;
       }
+
       .all1 {
         color: #37f4e9;
       }
+
       .all2 {
         color: #ffd15c;
       }
+
       .num {
         color: #fff;
         font-size: 18px;
       }
     }
   }
+
   @media screen and (max-width: 500px) {
     .allNum {
       width: 100% !important;
       top: -30px !important;
       left: 0 !important;
-      & > p {
+
+      &>p {
         justify-content: center;
       }
     }