可视化话题详情组件9

src/assets/scss/modules/visual/heart.scss

@@ -8,6 +8,42 @@
     justify-content: space-between;
     margin-top: 5px;
 }
+
+.m-sizer {
+    width: 195px;
+    margin: 10px 0;
+    margin-left: auto;
+
+    > span {
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+    }
+
+    ::v-deep .el-input {
+        width: 140px;
+        height: 36px;
+        .el-input__inner {
+            height: 100%;
+            padding: 0 10px;
+            color: #fff;
+            line-height: 36px;
+            background: #06186d;
+            border: 1px solid #1a64cc;
+        }
+        .el-icon-arrow-up:before {
+            content: "\e78f";
+        }
+    }
+    ::v-deep .el-date-editor {
+        .el-input__prefix {
+            left: unset;
+            right: 5px;
+        }
+    }
+}
+
 .m-tb {
     width: 33%;
     .title {
@@ -28,7 +64,7 @@
         }
     }
     .tb {
-        height: calc(100vh - 180px);
+        height: calc(100vh - 230px);
         overflow-y: auto;
         @include scrollBar;
     }

src/views/modules/visual/heart/index.vue

@@ -1,60 +1,75 @@
 <template>
-  <div class="g-cpt">
-    <div class="m-tb">
-      <cpt-card>
-        <div class="title">
-          <img src="@/assets/img/shuju/title-tip.png" />
-          <span>公益达人</span>
-        </div>
-
-        <div class="tb">
-          <cpt-tb
-            :highlight-top3="true"
-            :col-list="tb3.colList"
-            :loading="tb3.loading"
-            :header="tb3.header"
-            :list="tb3.list"
-          ></cpt-tb>
-        </div>
-      </cpt-card>
+  <div>
+    <div class="m-sizer">
+      <span>时间：</span>
+      <el-date-picker
+        v-model="monthId"
+        type="month"
+        :clearable="false"
+        prefix-icon="el-icon-caret-bottom"
+        placeholder="选择日期"
+        value-format="yyyyMM"
+      >
+      </el-date-picker>
     </div>
 
-    <div class="m-tb">
-      <cpt-card>
-        <div class="title">
-          <img src="@/assets/img/shuju/title-tip.png" />
-          <span>党员先锋</span>
-        </div>
+    <div class="g-cpt">
+      <div class="m-tb">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>公益达人</span>
+          </div>
 
-        <div class="tb">
-          <cpt-tb
-            :highlight-top3="true"
-            :col-list="tb2.colList"
-            :loading="tb2.loading"
-            :header="tb2.header"
-            :list="tb2.list"
-          ></cpt-tb>
-        </div>
-      </cpt-card>
-    </div>
+          <div class="tb">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb3.colList"
+              :loading="tb3.loading"
+              :header="tb3.header"
+              :list="tb3.list"
+            ></cpt-tb>
+          </div>
+        </cpt-card>
+      </div>
+
+      <div class="m-tb">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>党员先锋</span>
+          </div>
+
+          <div class="tb">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb2.colList"
+              :loading="tb2.loading"
+              :header="tb2.header"
+              :list="tb2.list"
+            ></cpt-tb>
+          </div>
+        </cpt-card>
+      </div>
 
-    <div class="m-tb">
-      <cpt-card>
-        <div class="title">
-          <img src="@/assets/img/shuju/title-tip.png" />
-          <span>动力网格</span>
-        </div>
+      <div class="m-tb">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>动力网格</span>
+          </div>
 
-        <div class="tb">
-          <cpt-tb
-            :highlight-top3="true"
-            :col-list="tb1.colList"
-            :loading="tb1.loading"
-            :header="tb1.header"
-            :list="tb1.list"
-          ></cpt-tb>
-        </div>
-      </cpt-card>
+          <div class="tb">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb1.colList"
+              :loading="tb1.loading"
+              :header="tb1.header"
+              :list="tb1.list"
+            ></cpt-tb>
+          </div>
+        </cpt-card>
+      </div>
     </div>
   </div>
 </template>
@@ -64,6 +79,7 @@ import { Loading } from "element-ui"; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
+import nextTick from "dai-js/tools/nextTick";
 
 export default {
   name: "heart",
@@ -72,6 +88,8 @@ export default {
       agencyId: "",
       areaCode: "",
 
+      monthId: "",
+
       // 先进网格/支部
       tb1: {
         loading: true,
@@ -160,10 +178,15 @@ export default {
     cptTb,
   },
 
-  watch: {},
+  watch: {
+    monthId() {
+      this.getApiData();
+    },
+  },
 
   async mounted() {
     this.userId = this.uid;
+    await nextTick(100);
     this.getApiData();
   },
 
@@ -202,6 +225,7 @@ export default {
       let params = {
         agencyId,
         areaCode,
+        monthId: this.monthId,
         orgType: "agency",
         topNum: 50,
       };
@@ -226,6 +250,7 @@ export default {
       let params = {
         orgId: agencyId,
         areaCode,
+        monthId: this.monthId,
         orgType: "agency",
         topNum: 50,
       };
@@ -255,6 +280,7 @@ export default {
       let params = {
         orgId: agencyId,
         areaCode,
+        monthId: this.monthId,
         orgType: "agency",
         topNum: 50,
       };