Browse Source

新增导出

chenrui  2 years ago
parent
commit
10b3a40ee7

+ 113 - 0
package-lock.json

@@ -2420,6 +2420,15 @@
       "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -3457,6 +3466,22 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "dependencies": {
+        "adler-32": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+          "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
+        }
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
@@ -3788,6 +3813,22 @@
         "q": "^1.1.2"
       }
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
+      "requires": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -4259,6 +4300,11 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -5623,6 +5669,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmmirror.com/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -5917,6 +5968,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -5973,6 +6029,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -6134,6 +6195,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -9694,6 +9760,11 @@
         "renderkid": "^3.0.0"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
@@ -11005,6 +11076,14 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.17.0.tgz",
@@ -13009,6 +13088,16 @@
       "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -13085,6 +13174,30 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xlsx": {
+      "version": "0.16.9",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz",
+      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",

+ 3 - 1
package.json

@@ -12,10 +12,12 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "echarts": "^5.3.3",
+    "file-saver": "^2.0.5",
     "store": "^2.0.12",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "xlsx": "^0.16.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

+ 27 - 0
src/api/statistics/statistics.js

@@ -18,6 +18,15 @@ export function comprehensive(query) {
   })
 }
 
+//导出航空货物综合统计接口1
+export function comprehensivexcel(query) {
+  return request({
+    url: '/system/waybill/countexcel',
+    method: 'get',
+    params: query
+  })
+}
+
 // 获取航空货物综合统计接口2
 export function comprehensiveTable(query) {
   return request({
@@ -27,6 +36,15 @@ export function comprehensiveTable(query) {
   })
 }
 
+// 导出获取航空货物综合统计接口2
+export function comprehensiveTableexcle(query) {
+  return request({
+    url: '/system/waybill/countinfoexcel',
+    method: 'get',
+    params: query
+  })
+}
+
 // 获取货物运单列表接口
 export function waybill(query) {
   return request({
@@ -45,6 +63,15 @@ export function agent(query) {
   })
 }
 
+// 导出航线货物关联统计接口
+export function agentexcl(query) {
+  return request({
+    url: '/risk/waybill/airlineCargoexcel',
+    method: 'get',
+    data: query
+  })
+}
+
 // 航线货物关联统计接口
 // export function agent(query) {
 //   return request({

+ 9 - 1
src/views/securityCheck/components/securityCheckHeader.vue

@@ -125,7 +125,11 @@
       </template>
       <template v-if="withExportButton">
         <a-form-item>
-          <a-button size="small" class="btn-icon-only icon-export" />
+          <a-button
+            size="small"
+            class="btn-icon-only icon-export"
+            @click="exportexcel"
+          />
         </a-form-item>
       </template>
     </a-form>
@@ -364,6 +368,10 @@ export default {
     }
   },
   methods: {
+    //导出
+    exportexcel() {
+      this.$emit("exportex");
+    },
     handleChange(data) {
       this.formData.selection = data;
     },

+ 5 - 0
src/views/securityCheck/components/securityCheckTable.vue

@@ -7,6 +7,7 @@
       :data-source="tableData"
       :columns="columns"
       :row-key="rowKey"
+      :id="'table' + id"
       :row-selection="
         withSelection
           ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
@@ -116,6 +117,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    id: {
+      type: String,
+      default: "10",
+    },
   },
   data() {
     return {

+ 41 - 1
src/views/securityCheck/views/agentTable.vue

@@ -5,10 +5,12 @@
         title="代理人信息统计"
         @change="changeHandler"
         @search="searchHandler"
+        @exportex="exportex"
       />
     </header>
     <main>
       <SecurityCheckTable
+        id="3"
         :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
@@ -25,7 +27,12 @@
 <script>
 import SecurityCheckHeader from "../components/securityCheckHeader.vue";
 import SecurityCheckTable from "../components/securityCheckTable.vue";
-import { comprehensiveTable } from "@/api/statistics/statistics.js";
+import {
+  comprehensiveTable,
+  comprehensiveTableexcle,
+} from "@/api/statistics/statistics.js";
+import XLSX from "xlsx";
+import FileSaver from "file-saver";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
@@ -178,6 +185,39 @@ export default {
     window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
+    //导出
+    async exportex() {
+      let that = this;
+      this.$confirm({
+        title: "是否确认导出",
+        content: "此操作将导出当前条件下所有数据而非选中数据",
+        onOk() {
+          return comprehensiveTableexcle(this.FormData).then((response) => {
+            that.download(response.msg);
+            that.$message.success("导出成功", 3);
+          });
+        },
+      });
+    },
+    downFile() {
+      var wb = XLSX.utils.table_to_book(document.querySelector("#table3"));
+      var wbout = XLSX.write(wb, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+      try {
+        FileSaver.saveAs(
+          new Blob([wbout], {
+            type: "application/octet-stream",
+          }),
+          "代理人信息统计.xlsx"
+        );
+      } catch (e) {
+        if (typeof console !== "undefined") console.log(e, wbout);
+      }
+      return wbout;
+    },
     formatDate() {
       let date = new Date();
       let myyear = date.getFullYear();

+ 63 - 4
src/views/securityCheck/views/cargoRelevanceTable.vue

@@ -8,10 +8,12 @@
         mode="combobox"
         selectPlaceholder="目的地"
         :optionLists="destination"
+        @exportex="exportex"
       />
     </header>
     <main>
       <SecurityCheckTable
+        id="1"
         :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
@@ -28,7 +30,9 @@
 <script>
 import SecurityCheckHeader from "../components/securityCheckHeader.vue";
 import SecurityCheckTable from "../components/securityCheckTable.vue";
-import { agent, routeall } from "@/api/statistics/statistics.js";
+import { agent, routeall, agentexcl } from "@/api/statistics/statistics.js";
+import XLSX from "xlsx";
+import FileSaver from "file-saver";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
@@ -263,6 +267,61 @@ export default {
     window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
+    //导出
+    async exportex() {
+      // let that = this;
+      // this.$confirm({
+      //   title: "是否确认导出",
+      //   content: "此操作将导出当前条件下所有数据而非选中数据",
+      //   onOk() {
+      //     return agentexcl(this.FormData).then((response) => {
+      //       that.download(response.msg);
+      //       that.$message.success("导出成功", 3);
+      //     });
+      //   },
+      // });
+      this.downFile();
+    },
+    //导出
+    downlodTable() {
+      this.$confirm("是否需要导出xlsx文档, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.downFile();
+          this.$message({
+            type: "success",
+            message: "导出成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消导出",
+          });
+        });
+    },
+    downFile() {
+      var wb = XLSX.utils.table_to_book(document.querySelector("#table1"));
+      var wbout = XLSX.write(wb, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+      try {
+        FileSaver.saveAs(
+          new Blob([wbout], {
+            type: "application/octet-stream",
+          }),
+          "航线货物关联统计.xlsx"
+        );
+      } catch (e) {
+        if (typeof console !== "undefined") console.log(e, wbout);
+      }
+      return wbout;
+    },
     formatDate() {
       let date = new Date();
       let myyear = date.getFullYear();
@@ -285,14 +344,14 @@ export default {
             };
             this.destination.push(obj);
           });
-          this.destination.sort(this.up)
+          this.destination.sort(this.up);
         }
       } catch (error) {
         console.log(error);
       }
     },
-    up(x,y){
-      return x.lable.charCodeAt(0) - y.lable.charCodeAt(0)
+    up(x, y) {
+      return x.lable.charCodeAt(0) - y.lable.charCodeAt(0);
     },
     //接口数据
     async getData() {

+ 42 - 1
src/views/securityCheck/views/cargoTable.vue

@@ -5,10 +5,12 @@
         title="航空货物综合统计"
         @change="changeHandler"
         @search="searchHandler"
+        @exportex="exportex"
       />
     </header>
     <main>
       <SecurityCheckTable
+        id="2"
         :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
@@ -25,7 +27,12 @@
 <script>
 import SecurityCheckHeader from "../components/securityCheckHeader.vue";
 import SecurityCheckTable from "../components/securityCheckTable.vue";
-import { comprehensive } from "@/api/statistics/statistics.js";
+import {
+  comprehensive,
+  comprehensivexcel,
+} from "@/api/statistics/statistics.js";
+import XLSX from "xlsx";
+import FileSaver from "file-saver";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
@@ -167,6 +174,40 @@ export default {
     window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
+    //导出
+    async exportex() {
+      // let that = this;
+      // this.$confirm({
+      //   title: "是否确认导出",
+      //   content: "此操作将导出当前条件下所有数据而非选中数据",
+      //   onOk() {
+      //     return comprehensivexcel(this.FormData).then((response) => {
+      //       that.download(response.msg);
+      //       that.$message.success("导出成功", 3);
+      //     });
+      //   },
+      // });
+      this.downFile();
+    },
+    downFile() {
+      var wb = XLSX.utils.table_to_book(document.querySelector("#table2"));
+      var wbout = XLSX.write(wb, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+      try {
+        FileSaver.saveAs(
+          new Blob([wbout], {
+            type: "application/octet-stream",
+          }),
+          "航空货物综合统计.xlsx"
+        );
+      } catch (e) {
+        if (typeof console !== "undefined") console.log(e, wbout);
+      }
+      return wbout;
+    },
     formatDate() {
       let date = new Date();
       let myyear = date.getFullYear();

+ 32 - 21
src/views/securityCheck/views/waybillTable.vue

@@ -9,6 +9,7 @@
         :with-input="true"
         searchPlaceholder="请输入搜索条件"
         @search="searchHandler"
+        :withExportButton="false"
       />
     </header>
     <main>
@@ -34,11 +35,11 @@ export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      loading:false,
+      loading: false,
       pagination: {
         showSizeChanger: true,
         showQuickJumper: true,
-        total:0, //数据总数
+        total: 0, //数据总数
         pageSize: 10,
         current: 1,
         showTotal: (total) => {
@@ -125,7 +126,7 @@ export default {
         },
       ],
       FormData: {
-        waybillNo:"",//运单号
+        waybillNo: "", //运单号
         destination: "", // 目的站
         agentCode: "", // 代理人ID
         agentLevel: "", // 代理人信用等级 A\B\C\D
@@ -133,29 +134,39 @@ export default {
         startTime: "", //开始时间
         endTime: "", // 结束时间
         openResult: "", //  开箱结果
-        riskClassification:"",//货物风险等级 高风险\低风险\普通
+        riskClassification: "", //货物风险等级 高风险\低风险\普通
         pageNum: "1", //** 当前记录起始索引 */
         pageSize: "10", // /** 每页显示记录数 */
       },
       tableData: [],
     };
   },
-  created(){
+  created() {
     let queryData = this.$route.query;
-    const {waybillNo, destination, agentCode,agentLevel,riskRating,startTime,endTime,openResult,riskClassification } = queryData;
+    const {
+      waybillNo,
+      destination,
+      agentCode,
+      agentLevel,
+      riskRating,
+      startTime,
+      endTime,
+      openResult,
+      riskClassification,
+    } = queryData;
     this.FormData = {
-      waybillNo:waybillNo,
-      destination:destination,
-      agentCode:agentCode,
-      agentLevel:agentLevel,
-      riskRating:riskRating,
-      startTime:startTime,
-      endTime:endTime,
-      openResult:openResult,
-      riskClassification:riskClassification,
+      waybillNo: waybillNo,
+      destination: destination,
+      agentCode: agentCode,
+      agentLevel: agentLevel,
+      riskRating: riskRating,
+      startTime: startTime,
+      endTime: endTime,
+      openResult: openResult,
+      riskClassification: riskClassification,
       pageNum: "1",
       pageSize: "10",
-    }
+    };
   },
   mounted() {
     this.setTableHeight();
@@ -167,8 +178,8 @@ export default {
   },
   methods: {
     searchHandler(arr) {
-      this.FormData.waybillNo = arr[0]
-      this.getData()
+      this.FormData.waybillNo = arr[0];
+      this.getData();
     },
     setTableHeight() {
       const topBarHeight = 80;
@@ -196,8 +207,8 @@ export default {
     handleTableChange(data) {
       this.pagination.current = data.current;
       this.pagination.pageSize = data.pageSize;
-      this.FormData.pageNum = data.current+"";
-      this.FormData.pageSize = data.pageSize+"";
+      this.FormData.pageNum = data.current + "";
+      this.FormData.pageSize = data.pageSize + "";
       this.getData();
     },
   },
@@ -207,7 +218,7 @@ export default {
 <style lang="scss" scoped>
 .table-wrapper {
   padding: 0 24px;
-  
+
   .table-header-wrapper {
     padding-top: 24px;
   }