修复bug

backstage/package-lock.json

@@ -14,6 +14,7 @@
         "js-base64": "^3.6.1",
         "sortablejs": "^1.15.0",
         "vue": "^2.6.11",
+        "vue-json-excel": "^0.3.0",
         "vue-router": "^3.2.0",
         "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2"
@@ -5640,6 +5641,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "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.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz",
@@ -13606,6 +13612,14 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "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-loader": {
       "version": "15.9.7",
       "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.7.tgz",
@@ -19386,6 +19400,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "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.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz",
@@ -26029,6 +26048,14 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "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-loader": {
       "version": "15.9.7",
       "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.7.tgz",

backstage/package.json

@@ -16,6 +16,7 @@
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
+    "vue-json-excel": "^0.3.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

backstage/src/components/focus-bang/index.vue

@@ -65,6 +65,9 @@ export default {
 }
 
 .card-layout{
+  max-height: 300px;
+  overflow-y: auto;
+  flex-wrap: wrap;
   display: flex;
   justify-content: space-between;
 }

backstage/src/components/power-bar/index.vue

@@ -2,10 +2,13 @@
   <div class="power-layout">
     <p>各展馆访问量</p>
     <ul>
-      <li v-for="(item,i) in data.list" :key="i">
-        <span>{{item.name}}：</span>
-        <div :style="{width:`${ item.visit / data.all * 100}%`}" class="bar"></div>
-        <div class="visit">{{item.visit}}</div>
+      <li v-for="(item, i) in data.list" :key="i">
+        <span :title="item.name">{{ item.name }}</span>：
+        <div
+          :style="{ width: `${(item.visit / data.all) * 100}%` }"
+          class="bar"
+        ></div>
+        <div class="visit">{{ item.visit }}</div>
       </li>
     </ul>
   </div>
@@ -13,13 +16,13 @@
 
 <script>
 export default {
-  props: ['data'],
+  props: ["data"],
   data() {
     return {
-      sum: 25
-    }
-  }
-}
+      sum: 25,
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -27,23 +30,27 @@ export default {
   padding: 20px;
   height: 100%;
 
-  >p {
+  > p {
     margin-bottom: 20px;
   }
 
-  >ul {
+  > ul {
     height: 86%;
     overflow-y: auto;
     width: 100%;
 
-    >li {
+    > li {
       display: flex;
       margin-bottom: 20px;
       align-items: center;
 
-      >span {
-        display: inline-block;
+      > span {
+        cursor: pointer;
+        width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
+        display: inline-block;
       }
 
       .bar {
@@ -52,11 +59,10 @@ export default {
         background: #01a7f0;
       }
 
-      .visit{
+      .visit {
         margin-left: 10px;
       }
     }
-
   }
 }
 </style>

backstage/src/components/ww-card/index.vue

@@ -20,16 +20,17 @@ export default {
   position: relative;
   overflow: hidden;
   padding: 1rem;
+  margin-bottom: 25px;
 }
 
 .ww-layout .img{
   position: absolute;
-  right: 0;
+  left: 150px;
   top: 0;
   width: 240px;
   height: 240px;
   background-position: center;
-  background-size: auto 100%;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 
@@ -47,7 +48,7 @@ export default {
 }
 
 p{
-  margin-bottom: 12px;
+  margin-bottom: 22px;
 }
 
 </style>

backstage/src/configue/http.js

@@ -8,7 +8,8 @@ const vue = new Vue();
 var isProduction = process.env.NODE_ENV === "production";
 let loading = "";
 
-const serverName = isProduction ? "/api/" : "http://192.168.20.55:8035/api/";
+// const serverName = isProduction ? "/api/" : "http://192.168.20.55:8035/api/";
+const serverName = isProduction ? "/api/" : "https://gdbwg.4dage.com/api/";
 
 const serverLocation = window.location.hostname;
 

backstage/src/main.js

@@ -2,6 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+// 表格导出
+import JsonExcel from 'vue-json-excel'
+Vue.component('downloadExcel', JsonExcel)
+
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import '../theme/index.css'

backstage/src/pages/system/statistics/index.vue

@@ -1,7 +1,19 @@
 <template>
   <div>
     <main-top>
-      <div slot="con"></div>
+      <div slot="con">
+        <!-- 导出 -->
+        <download-excel
+          :before-generate="derive"
+          class="export-excel-wrapper"
+          :data="json_data"
+          :fields="json_fields"
+          name="数据统计.xls"
+        >
+          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+          <el-button type="primary">导出</el-button>
+        </download-excel>
+      </div>
     </main-top>
     <div class="tablecon">
       <div class="tablebody">
@@ -10,7 +22,7 @@
             <div>
               <div>
                 <span>累计访问量</span>
-                <p>{{totalVisit}}</p>
+                <p>{{ totalVisit }}</p>
               </div>
               <i class="el-icon-s-data"></i>
             </div>
@@ -18,18 +30,17 @@
             <div>
               <div>
                 <span>今日访问量</span>
-                <p>{{todayVisit}}</p>
+                <p>{{ todayVisit }}</p>
               </div>
               <i class="el-icon-view"></i>
             </div>
           </div>
           <div class="ttr">
-            <PowerBar class="n-i" :data='visitData' />
+            <PowerBar class="n-i" :data="visitData" />
           </div>
         </div>
         <div class="tbottom">
-          <FocusBang v-if="focus.length>0" :data="focus" />
-
+          <FocusBang v-if="focus.length > 0" :data="focus" />
         </div>
       </div>
     </div>
@@ -40,53 +51,77 @@
 import MainTop from "@/components/main-top";
 import { mapGetters } from "vuex";
 import { getReportDetail } from "@/configue/api";
-import PowerBar from '@/components/power-bar'
-
-import FocusBang from '@/components/focus-bang'
+import PowerBar from "@/components/power-bar";
 
+import FocusBang from "@/components/focus-bang";
 
 export default {
+  name: "Derive",
   data() {
     return {
       focus: [],
       todayVisit: 0,
       totalVisit: 0,
-      visitData: { list: [], all: 0 }
-
+      visitData: { list: [], all: 0 },
+      // 关于导出的数据
+      json_fields: {
+        排行名次: "index",
+        展馆名称: "name",
+        访问量: "visit",
+      },
+      json_data: [],
+      json_meta: [
+        [
+          {
+            " key ": " charset ",
+            " value ": " utf- 8 ",
+          },
+        ],
+      ],
     };
   },
   components: {
     MainTop,
     FocusBang,
-    PowerBar
+    PowerBar,
   },
   methods: {
+    // 点击导出
+    async derive() {
+      this.visitData.list.forEach((v, i) => {
+        this.json_data.push({
+          index: i + 1,
+          name: v.name,
+          visit: v.visit,
+        });
+      });
+    },
     getReport() {
-      getReportDetail(data => {
+      getReportDetail((data) => {
         this.focus = data.data.ranking.map((item, i) => {
           return {
             num: i + 1,
             zan: item.visit,
             name: item.exhibitionName,
-            img: item.thumb
-          }
-        })
+            img: item.thumb,
+          };
+        });
 
-        let all = 0
+        let all = 0;
 
         this.visitData.list = data.data.exhibitionVisit.map((item) => {
-          all += item.visit
+          all += item.visit;
           return {
             visit: item.visit,
             name: item.exhibitionName,
-            img: item.thumb
-          }
-        })
-
-        this.visitData.all = all
-        this.todayVisit = data.data.todayVisit
-        this.totalVisit = data.data.totalVisit
-      })
+            img: item.thumb,
+          };
+        });
+
+        this.visitData.all = all;
+        this.todayVisit = data.data.todayVisit;
+        this.totalVisit = data.data.totalVisit;
+      });
     },
   },
   computed: {
@@ -111,7 +146,7 @@ export default {
     },
   },
   mounted() {
-    this.getReport()
+    this.getReport();
   },
 };
 </script>
@@ -138,7 +173,7 @@ export default {
       display: flex;
       justify-content: space-between;
 
-      >div {
+      > div {
         height: 100%;
         width: 49%;
         border-radius: 8px;
@@ -147,28 +182,27 @@ export default {
         display: flex;
         align-items: center;
 
-        >div {
+        > div {
           margin-left: 10%;
           text-align: center;
 
-          >span {
+          > span {
             color: #999;
             font-size: 32px;
-
           }
 
-          >p {
+          > p {
             font-size: 40px;
             margin-top: 20px;
           }
         }
 
-        >i {
+        > i {
           position: absolute;
           top: 50%;
           right: 10%;
           font-size: 60px;
-          color: #B63C25;
+          color: #b63c25;
         }
       }
     }
@@ -179,7 +213,6 @@ export default {
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
       border-radius: 8px;
     }
-
   }
 
   .tbottom {

backstage/src/pages/system/worklog/index.vue

@@ -20,7 +20,7 @@
             <span>操作者：</span>
             <el-input
               class="elInput paddingmore"
-              :maxlength="25"
+              :maxlength="20"
               show-word-limit
               @keydown.enter.native="getList"
               v-model="search.inputKey"