From a91a56e5397d54285726bca7f14e67747019fa82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=98=E7=AB=8B=E6=A0=87?= <2658037827@qq.com>
Date: Fri, 22 Sep 2023 17:19:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E4=BA=8B=E4=BB=B6&?=
 =?UTF-8?q?=E5=9B=9E=E8=AE=BF=20=E4=BA=BA=E6=88=BF=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=9B=B4=E6=96=B0=20tab=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=8F=8A=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DynamicHumanRoomData.vue       |   4 +-
 .../overview/components/EventAndFollowUp.vue  |   5 +-
 .../overview/components/FollowUp.vue          | 166 ++++++++++++++++++
 .../overview/components/GridUpdateRanking.vue |  70 ++++++++
 src/views/dataBoard/overview/index.vue        |  59 ++++++-
 5 files changed, 292 insertions(+), 12 deletions(-)
 create mode 100644 src/views/dataBoard/overview/components/FollowUp.vue
 create mode 100644 src/views/dataBoard/overview/components/GridUpdateRanking.vue

diff --git a/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue b/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue
index 00ff17177..66656817d 100644
--- a/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue
+++ b/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 {
diff --git a/src/views/dataBoard/overview/components/EventAndFollowUp.vue b/src/views/dataBoard/overview/components/EventAndFollowUp.vue
index 8d4d7f6ee..69ed1c99f 100644
--- a/src/views/dataBoard/overview/components/EventAndFollowUp.vue
+++ b/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: {
diff --git a/src/views/dataBoard/overview/components/FollowUp.vue b/src/views/dataBoard/overview/components/FollowUp.vue
new file mode 100644
index 000000000..bab5c39ef
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/dataBoard/overview/components/GridUpdateRanking.vue b/src/views/dataBoard/overview/components/GridUpdateRanking.vue
new file mode 100644
index 000000000..ee2d9b217
--- /dev/null
+++ b/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>
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index a6b6eaa88..598fc17c3 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/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: '事件回访'
+      }]
     };
   },
 
@@ -220,20 +251,26 @@ export default {
     // const queryOrgId = getQueryPara("orgId");
     // const queryOrgLevel = getQueryPara("orgLevel");
     // this.init(queryOrgId, queryOrgLevel);
-    if(this.$store.state.chooseArea.chooseName.orgId) {
+    if (this.$store.state.chooseArea.chooseName.orgId) {
       this.getMapData()
     }
   },
 
   watch: {
-    "$store.state.chooseArea.chooseName"(val){
-      if(val.orgId) {
+    "$store.state.chooseArea.chooseName"(val) {
+      if (val.orgId) {
         this.getMapData()
       }
     }
   },
 
   methods: {
+    dynamicTypeChange(val) {
+      this.dynamicType = val
+    },
+    eventTypeChange(val) {
+      this.eventType = val
+    },
     async init(queryOrgId, queryOrgLevel) {
       if (queryOrgId) {
         this.orgId = queryOrgId;
@@ -284,7 +321,7 @@ export default {
         breadList.push(item);
         this.breadList = breadList;
       }
-      this.getMapData(item.orgId,item.orgLevel)
+      this.getMapData(item.orgId, item.orgLevel)
     },
 
     // 点击搜索结果条目，在地图上显示点和详情弹窗
@@ -299,7 +336,7 @@ export default {
     },
 
     //获取地图上显示的组织数据
-    async getMapData(orgId=this.$store.state.chooseArea.chooseName.orgId,level=this.$store.state.chooseArea.chooseName.level) {
+    async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
       const url = "org_map";
       this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
         this.orgData = data;
@@ -372,3 +409,9 @@ export default {
     src="@/assets/scss/dataBoard/overview/index.scss"
     scoped
 ></style>
+
+<style lang="scss" scoped>
+.tabs {
+  padding: 16px;
+}
+</style>