可视化话题详情组件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,4 +1,18 @@
 <template>
+  <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="g-cpt">
       <div class="m-tb">
         <cpt-card>
@@ -57,6 +71,7 @@
         </cpt-card>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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,
       };