时间切换

src/views/dataBoard/overview/components/jdjs.vue

@@ -20,20 +20,9 @@
       />
     </div>
     <title-small text="不满意风险人员">
-      <span class="date-span">
-        <el-date-picker
-          popper-class="date-current-weiyi"
-          :append-to-body="false"
-          v-model="rffxDate"
-          format="yyyy-MM"
-          value-format="yyyy-MM"
-          @change="changeDate"
-          type="month"
-          :clearable="false"
-          placeholder="选择月"
-        >
-        </el-date-picker>
-      </span>
+      <el-select v-model="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" @change="timeChange">
+        <el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
     </title-small>
     <div class="f-flex white f-mean">
       <div class="f-hflex"  @click="
@@ -42,7 +31,7 @@
         )
       ">
         <div><span class="f-pingfang">12345热线投诉人数</span></div>
-        <div class="f-darkGray" ><b class="f-font34 f-yellow">12</b>人</div>
+        <div class="f-darkGray" ><b class="f-font34 f-yellow">{{event12345Num}}</b>人</div>
       </div>
       <div class="f-hflex"  @click="
         $router.push(
@@ -50,7 +39,7 @@
         )
       ">
         <div><span class="f-pingfang">满意度调查不满意人数</span></div>
-        <div class="f-darkGray"><b class="f-font34 f-green">12</b>人</div>
+        <div class="f-darkGray"><b class="f-font34 f-green">{{provinceSatisfactionNum}}</b>人</div>
       </div>
       <div class="f-hflex"  @click="
         $router.push(
@@ -58,7 +47,7 @@
         )
       ">
         <div><span class="f-pingfang">社区自评不满意人数</span></div>
-        <div class="f-darkGray"><b class="f-font34 f-skyBlue">12</b>人</div>
+        <div class="f-darkGray"><b class="f-font34 f-skyBlue">{{selfInspectNum}}</b>人</div>
       </div>
     </div>
   </div>
@@ -82,20 +71,51 @@ export default {
       report: "",
       overview: "",
       loading: false,
-      rffxDate:''
+      rffxDate:'',
+      event12345Num:"",
+      provinceSatisfactionNum:"",
+      selfInspectNum:"",
+
+      typeConditionList: [
+        {
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
+        },
+      ],
+      typeCondition:5,
+
+      endTime:"",
+       startTime:"",
     };
   },
   watch: {
     currentLevelData(val) {
       if (val.orgId) {
         this.getReport(val);
-        // this.getData();
+        // this.getChartData();
       }
     },
   },
   mounted() {
     this.getReport(this.currentLevelData);
-      this.getData();
+    this.getChartData();
+    this.getData()
   },
   components: {
     titleSmall,
@@ -123,7 +143,7 @@ export default {
           this.report = data;
         });
     },
-    getData() {
+    getChartData() {
       this.loading = true
      
       this.$http.get('/actual/base/resiCategory/intelligentPredictioncategoryCountList').then(({data: {data}}) => {
@@ -312,13 +332,74 @@ export default {
       window.addEventListener("resize", () => this.myChart.resize());
       this.loading = false
     },
-    changeDate() {},
+    getData() {
+      this.loading = true;
+      let {startTime,endTime } = this
+      let params = {
+        level: this.$store.state.chooseArea.chooseName.level,
+        orgId: this.$store.state.chooseArea.chooseName.orgId,
+        startTime,
+        endTime,
+      };
+      this.$http
+        .get(
+          "/governance/satisfactionOverview/satisfactionFollowGroup?" +
+            this.$paramsFormat(params)
+        )
+        .then(({ data: { data } }) => {
+          this.event12345Num = data.event12345Num;
+          this.provinceSatisfactionNum = data.provinceSatisfactionNum;
+          this.selfInspectNum = data.selfInspectNum;
+          this.loading = false;
+        });
+    },
+    timeChange() {
+      let startTime = "",
+        endTime = "";
+      if (this.typeCondition === 1) {
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+      }
+      if (this.typeCondition === 2) {
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (this.typeCondition === 3) {
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (this.typeCondition === 4) {
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (this.typeCondition === 5) {
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+      }
+
+      if (this.typeCondition === 2) {
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      this.startTime = startTime;
+      this.endTime = endTime;
+      this.getData();
+    },
   },
 };
 </script>
 
 <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
-<style lang="scss">
+<style lang="scss" scoped>
+/deep/ .el-input__inner {
+    width: 90px !important;
+    height: 24px !important;
+    background: #021c49 !important;
+    border: 1px solid #125aaa !important;
+    border-radius: 12px !important;
+    color: #a0cdff;
+  }
+
+  /deep/ .el-input__icon {
+    line-height: 24px !important;
+    color: #a0cdff;
+  }
 .f-hflex{
   width: 83px;
 }