新增 事件&回访 人房数据动态更新 tab切换及页面

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

@@ -57,10 +57,10 @@ export default {
 <style scoped lang="scss">
 @import "@/assets/scss/dataBoard/c/common.scss";
 .dhrd {
-  padding: 20px 16px;
+  padding: 0 16px 20px;
 }
 .dhrd-list {
-  height: 200px;
+  height: 140px;
   overflow-y: auto;
   @include scrollBar
   .dhrd-item {

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

@@ -1,8 +1,8 @@
 <template>
   <div class="event">
-    <div class="tabs">
+<!--    <div class="tabs">
       <Tabs v-model="type" :list="typeList" @changeVal="typeChange"/>
-    </div>
+    </div>-->
     <div class="content">
       <div class="total">
         <div class="tit">事件总数</div>
@@ -55,6 +55,7 @@ export default {
       lastSumNum: 0,
       processNum: 0,
       closedNum: 0,
+      closedRatio: 0,
     }
   },
   watch: {

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="follow-up">
+    <div class="content">
+      <div class="left">
+        <div class="total">
+          <div class="tit">回访总数</div>
+          <div class="num"><span>{{ sumNum ? sumNum : 0 }}</span>个</div>
+        </div>
+        <div class="left-item">
+          <div class="tit">电话回访</div>
+          <div class="num"><span>{{ mobileNum ? mobileNum : 0 }}</span>个</div>
+        </div>
+        <div class="left-item">
+          <div class="tit">上门回访</div>
+          <div class="num"><span>{{ visitNum ? visitNum : 0 }}</span>个</div>
+        </div>
+      </div>
+      <div class="xc">
+        <div class="tit">回访消除 <br/> 风险人数</div>
+        <div class="num blue">{{ notRiskyNum ? notRiskyNum : 0 }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FollowUp",
+  props: {
+    date: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      org: this.$store.state.chooseArea.chooseName,
+      typeList: [{
+        label: '12345事件',
+        value: '12345'
+      }, {
+        label: '事件回访',
+        value: 'follow'
+      }],
+      type: 'follow',
+      sumNum: 0,
+      mobileNum: 0,
+      visitNum: 0,
+      notRiskyNum: 0,
+    }
+  },
+  watch: {
+    "$store.state.chooseArea.chooseName"(val) {
+      if (val.orgId) {
+        this.getData()
+      }
+    },
+    date() {
+      this.getData()
+    }
+  },
+  mounted() {
+    if (this.org.orgId) {
+      this.getData()
+    }
+  },
+  methods: {
+    getData() {
+      this.$http.get('/actual/base/streetOverview/eventAndFollowGroup?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId + '&queryType=' + this.type).then(({data: {data}}) => {
+        this.sumNum = data.sumNum
+        this.mobileNum = data.mobileNum
+        this.visitNum = data.visitNum
+        this.notRiskyNum = data.notRiskyNum
+      })
+    },
+    typeChange(val) {
+      console.log(val,'val')
+      this.type = val
+      this.getData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.follow-up {
+  padding: 10px 16px;
+}
+.content {
+  background: linear-gradient(90deg, rgba(1, 94, 234, 0.1) 0%, rgba(16, 50, 103, 0) 50%, rgba(1, 94, 234, 0.1) 100%);
+  padding: 40px 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left {
+  border-right: 1px solid #96B1CE;
+  padding-right: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .total {
+    .tit {
+      font-size: 16px;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-bottom: 20px;
+    }
+
+    .num {
+      font-size: 14px;
+      font-weight: 500;
+      color: #A3B9DA;
+
+      span {
+        font-size: 36px;
+        font-weight: bold;
+        font-style: italic;
+        color: #08EBAE;
+      }
+    }
+  }
+
+  .left-item {
+    margin-left: 24px;
+    .tit {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A3B9DA;
+      line-height: 24px;
+      margin-bottom: 24px;
+    }
+
+    .num {
+      font-size: 14px;
+      font-weight: 500;
+      color: #A3B9DA;
+      span {
+        font-size: 30px;
+        font-weight: bold;
+        font-style: italic;
+        color: #78C4F3;
+      }
+    }
+  }
+}
+
+.xc {
+  .tit {
+    font-size: 16px;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  .num {
+    font-size: 32px;
+    font-weight: bold;
+    font-style: italic;
+    color: #FFB73C;
+  }
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="m-subbox m-sqrfph">
+    <div class="table">
+      <div class="tr">
+        <div class="th">排名</div>
+        <div class="th">社区</div>
+        <div class="th">房屋更新数</div>
+        <div class="th">人口更新数</div>
+        <div class="th">人房更新总数</div>
+      </div>
+      <div class="tr" v-for="(item,index) in pmList" :key="index">
+        <div :class="index - 0 + 1 < 4 ? `td tdbg${index-0+1}` : 'td'">
+          {{ index - 0 + 1 }}
+        </div>
+        <div class="td">{{ item.orgName }}</div>
+        <div class="td">{{ item.houseNum }}</div>
+        <div class="td">{{ item.residentNum }}</div>
+        <div class="td">{{ item.sumNum }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "GridUpdateRanking",
+  props: {
+    date: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      org: this.$store.state.chooseArea.chooseName,
+      pmList: [],
+    };
+  },
+  watch: {
+    "$store.state.chooseArea.chooseName"(val) {
+      if (val.orgId) {
+        this.getList()
+      }
+    },
+    date() {
+      this.getList()
+    }
+  },
+  mounted() {
+    if (this.org.orgId) {
+      this.getList()
+    }
+  },
+  methods: {
+    getList() {
+      this.$http.get('/actual/base/streetOverview/residentHouseUpdateGroup?level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => {
+        this.pmList = data
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped/>
+<style lang="scss" scoped>
+.m-sqrfph {
+  padding-top: 0 !important;
+  height: 160px !important;
+}
+
+</style>

src/views/dataBoard/overview/index.vue

@@ -86,7 +86,14 @@
         <!-- 社区&网格-->
         <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
           <title-box text="人房数据动态更新"/>
-          <DynamicHumanRoomData/>
+          <Tabs
+              v-model="dynamicType"
+              :list="dynamicTypeList"
+              v-if="currentLevel === 'community'"
+              @changeVal="dynamicTypeChange"
+          />
+          <DynamicHumanRoomData v-if="dynamicType === 1"/>
+          <GridUpdateRanking v-if="dynamicType === 2"/>
         </div>
         <!-- 社区概览-->
         <div v-if="currentLevel === 'community'" class="m-box">
@@ -118,7 +125,9 @@
               />
             </span>
           </title-box>
-          <EventAndFollowUp :date="sjhfDate"/>
+          <Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange"/>
+          <EventAndFollowUp :date="sjhfDate" v-if="eventType === 1"/>
+          <FollowUp :date="sjhfDate" v-if="eventType === 2"/>
         </div>
         <!-- 网格 -->
         <div v-if="currentLevel === 'grid'" class="m-box">
@@ -159,9 +168,12 @@ import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
 import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
 
 import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
+import GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.vue";
 import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
 import EventAndFollowUp from "@/views/dataBoard/overview/components/EventAndFollowUp.vue";
 import RankingGridData from "@/views/dataBoard/overview/components/RankingGridData.vue";
+import FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
 
 import {requestPostBi} from "@/js/dai/request-bipass";
@@ -186,7 +198,10 @@ export default {
     DynamicHumanRoomData,
     CommunityResult,
     EventAndFollowUp,
-    RankingGridData
+    RankingGridData,
+    GridUpdateRanking,
+    FollowUp,
+    Tabs
   },
 
   data() {
@@ -213,6 +228,22 @@ export default {
 
       displayedResiId: "",
       displayedHouseId: "",
+      dynamicType: 1,
+      dynamicTypeList: [{
+        value: 1,
+        label: '更新动态'
+      }, {
+        value: 2,
+        label: '网格更新排行'
+      }],
+      eventType: 1,
+      eventTypeList: [{
+        value: 1,
+        label: '12345事件'
+      }, {
+        value: 2,
+        label: '事件回访'
+      }]
     };
   },
 
@@ -234,6 +265,12 @@ export default {
   },
 
   methods: {
+    dynamicTypeChange(val) {
+      this.dynamicType = val
+    },
+    eventTypeChange(val) {
+      this.eventType = val
+    },
     async init(queryOrgId, queryOrgLevel) {
       if (queryOrgId) {
         this.orgId = queryOrgId;
@@ -372,3 +409,9 @@ export default {
     src="@/assets/scss/dataBoard/overview/index.scss"
     scoped
 ></style>
+
+<style lang="scss" scoped>
+.tabs {
+  padding: 16px;
+}
+</style>