2023-11-14

src/views/component/table.vue

@@ -244,7 +244,7 @@
       ref="xyTable"
       :border="true"
       :action="index"
-      :req-opt="select"
+      :req-opt="tableSelect"
       :destroy-req-opt="select"
       :table-item="table"
       @detail="
@@ -327,6 +327,7 @@ export default {
           },
         ],
       },
+      selectQuery: [],
       form: [],
       table: [],
       customForm: {
@@ -400,6 +401,13 @@ export default {
           console.warn(err);
         }
       }
+      if (this.$route.meta.params?.select) {
+        try {
+          this.selectQuery = JSON.parse(decodeURIComponent(this.$route.meta.params?.select));
+        } catch (err) {
+          console.warn(err);
+        }
+      }
 
       const res = await show({ id: this.customForm.customFormId }, false);
 
@@ -587,6 +595,14 @@ export default {
           ? this.form.find((i) => i.field === field)._params
           : [];
       };
+    },
+
+    tableSelect () {
+      let filter = [...this.select.filter,...this.selectQuery]
+      return {
+        ...this.select,
+        filter
+      }
     }
   },
   created() {

src/views/dashboard/index.vue

@@ -14,14 +14,18 @@
               <p>累计查询下载数</p>
 
               <div>
-                {{ chartData.total_down }}
+                <p>{{ chartData.total_down }}</p>
+                <span>周同比</span>
+                <i class="el-icon-caret-top"></i>
               </div>
             </div>
             <div class="compare compare-week">
               <p>本周查询下载数</p>
 
               <div>
-                {{ chartData.week_down }}
+                <p>{{ chartData.week_down }}</p>
+                <span>周同比</span>
+                <i class="el-icon-caret-bottom"></i>
               </div>
             </div>
           </div>
@@ -71,6 +75,7 @@ export default {
         total_down: 0,
         week_down: 0,
       },
+      chartDownData: [],
       select: {
         start_date: this.$moment().startOf("week").format("YYYY-MM-DD"),
         end_date: this.$moment().endOf("week").format("YYYY-MM-DD"),
@@ -121,8 +126,12 @@ export default {
         })
         .catch();
     },
-    async init() {
+    async loadChartDown () {
       let res = await getChartDown(this.select);
+      this.chartDownData = res;
+    },
+
+    async init() {
 
       this.line = echarts.init(document.getElementById("chart-panel"));
       this.line.setOption({
@@ -130,7 +139,7 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: res.map((i) => i.date),
+          data: this.chartDownData.map((i) => i.date),
         },
         yAxis: {
           type: "value",
@@ -146,7 +155,7 @@ export default {
         series: [
           {
             name: "下载数量",
-            data: res.map((i) => i.total),
+            data: this.chartDownData.map((i) => i.total),
             type: "line",
             smooth: true,
             areaStyle: {
@@ -171,9 +180,13 @@ export default {
     this.loadData();
   },
   mounted() {
+    this.loadChartDown().then(res => {
       this.init();
+    })
 
-    window.onresize = () => {};
+    window.onresize = () => {
+      this.init();
+    };
   },
   destroyed() {
     window.onresize = null;
@@ -266,11 +279,33 @@ export default {
         font-weight: 600;
         color: #666;
 
-        padding: 4px 0;
+        padding: 8px 0;
       }
       & > div {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-evenly;
         font-weight: 900;
         font-size: 18px;
+
+        padding: 0 10px;
+
+        & > span {
+          color: #999;
+          zoom: .75;
+
+          padding-left: 12px;
+        }
+        .el-icon-caret-bottom {
+          color: red;
+
+          padding-left: 6px;
+        }
+        .el-icon-caret-top {
+          color: green;
+
+          padding-left: 6px;
+        }
       }
 
       & + .compare {
@@ -283,6 +318,7 @@ export default {
 
     margin-left: 60px;
     .select-panel {
+      width: 100%;
       display: flex;
       justify-content: space-between;
 
@@ -297,6 +333,7 @@ export default {
     }
 
     #chart-panel {
+      width: 100%;
       height: 320px;
     }
   }