概览动态更新改为四条展示，页面间距调整

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

@@ -34,12 +34,8 @@
         </div>
       </div>
     </div>
-    <div v-else style="width: 100%; height: 100%; text-align: center;padding-top: 20px;">
+    <div v-else style="width: 100%; height: 100%; text-align: center; padding-top: 30px">
-      <img
+      <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
-        width="268px"
-        height="128px"
-        src="~@/assets/images/overview/zanwu.png"
-      />
       <div class="zanwuText">近3日暂无更新</div>
     </div>
   </div>
@@ -74,25 +70,13 @@ export default {
   },
   methods: {
     getList(item) {
-      this.$http
+      this.$http.get("/actual/base/streetOverview/residentHouseUpdateRecord?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
-        .get(
-          "/actual/base/streetOverview/residentHouseUpdateRecord?level=" +
-            item.orgLevel +
-            "&orgId=" +
-            item.orgId
-        )
-        .then(({ data: { data } }) => {
         this.list = data;
         if (this.list.length > 4) {
           this.$nextTick(() => {
-              const aniHeight =
+            const aniHeight = this.$refs.animation2.querySelector(".tr").offsetHeight * this.pmList.length;
-                this.$refs.animation2.querySelector(".tr").offsetHeight *
-                this.pmList.length;
             this.$refs.animation2.style.animation = `move1 ${this.pmList.length}s linear infinite`;
-              document.styleSheets[0].insertRule(
+            document.styleSheets[0].insertRule(`@keyframes move2{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`, 0);
-                `@keyframes move2{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`,
-                0
-              );
           });
         } else {
           this.$refs.animation2.style.animation = null;
@@ -116,7 +100,7 @@ export default {
   color: #a3b9da;
 }
 .dhrd-list {
-  height: 140px;
+  height: 150px;
   overflow-y: auto;
   @include scrollBar .dhrd-item {
     display: flex;

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

@@ -22,9 +22,7 @@
           <!-- 无缝滚动 -->
           <div v-if="pmList.length > 3">
             <div class="tr" v-for="(item, index) in pmList" :key="index">
-              <div
+              <div :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'">
-                :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'"
-              >
                 {{ index - 0 + 1 }}
               </div>
               <div class="td">{{ item.orgName }}</div>
@@ -36,15 +34,8 @@
         </div>
       </div>
     </div>
-    <div
+    <div v-else style="width: 100%; height: 100%; text-align: center; padding-top: 15px">
-      v-else
+      <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
-      style="width: 100%; height: 100%; text-align: center; padding-top: 20px"
-    >
-      <img
-        width="268px"
-        height="128px"
-        src="~@/assets/images/overview/zanwu.png"
-      />
       <div class="zanwuText">近3日暂无更新</div>
     </div>
   </div>
@@ -85,25 +76,13 @@ export default {
   },
   methods: {
     getList(item) {
-      this.$http
+      this.$http.get("/actual/base/streetOverview/residentHouseUpdateGroupByGrid?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
-        .get(
-          "/actual/base/streetOverview/residentHouseUpdateGroupByGrid?level=" +
-            item.orgLevel +
-            "&orgId=" +
-            item.orgId
-        )
-        .then(({ data: { data } }) => {
         this.pmList = data;
         if (this.pmList.length > 3) {
           this.$nextTick(() => {
-              const aniHeight =
+            const aniHeight = this.$refs.animation1.querySelector(".tr").offsetHeight * this.pmList.length;
-                this.$refs.animation1.querySelector(".tr").offsetHeight *
-                this.pmList.length;
             this.$refs.animation1.style.animation = `move1 ${this.pmList.length}s linear infinite`;
-              document.styleSheets[0].insertRule(
+            document.styleSheets[0].insertRule(`@keyframes move1{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`, 0);
-                `@keyframes move1{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`,
-                0
-              );
           });
         } else {
           this.$refs.animation1.style.animation = null;
@@ -118,7 +97,7 @@ export default {
 <style lang="scss" scoped>
 .m-sqrfph {
   padding-top: 0 !important;
-  height: 150px !important;
+  height: 205px !important;
 }
 .zanwuText {
   margin-top: -34px;

src/views/dataBoard/overview/index.vue

@@ -8,67 +8,26 @@
     <div class="g-row">
       <div class="g-left">
         <div class="m-box">
-          <title-box
+          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" />
-            :text="`${
-              currentLevel === 'district'
-                ? '区'
-                : currentLevel === 'street'
-                ? '街道'
-                : currentLevel === 'community'
-                ? '社区'
-                : currentLevel === 'grid'
-                ? '网格'
-                : ''
-            }介绍`"
-          />
           <jdjs :currentLevelData="currentLevelData" />
         </div>
 
         <div class="m-box">
-          <title-box
+          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
-            :text="`${
-              currentLevel === 'district'
-                ? '区'
-                : currentLevel === 'street'
-                ? '街道'
-                : currentLevel === 'community'
-                ? '社区'
-                : currentLevel === 'grid'
-                ? '网格'
-                : ''
-            }图谱画像`"
-          />
           <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
         </div>
       </div>
       <div class="g-center">
         <div class="m-map" style="overflow: hidden">
-          <map-top
+          <map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel" />
-            :currentLevelData="currentLevelData"
-            @changeType="changeType"
-            :level="currentLevel"
-          />
           <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
             <img src="~@/assets/images/shuju/overview/go-back.png" />
           </div>
-          <grid-map
+          <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" />
-            ref="map"
-            @clickAgency="clickAgencyItem"
-            :srcGridData="orgData"
-            @clickDotBtn="handleClickDotBtn"
-            :level="currentLevel"
-            :peopleType="peopleType"
-          />
         </div>
         <div class="m-box m-rybox">
           <title-box :text="`${customerName}${peopleList[peopleType]}`" />
-          <jdwgy
+          <jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" />
-            :peopleType="peopleType"
-            :currentLevelData="currentLevelData"
-            :level="currentLevel"
-            @setNum="setNum"
-            @setPoint="setPoint"
-          />
         </div>
       </div>
 
@@ -78,136 +37,57 @@
           <rfsjtj :currentLevelData="currentLevelData" />
         </div>
         <!-- 街道概览 -->
-        <div
+        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
-          v-if="currentLevel === 'street' || currentLevel === 'district'"
-          class="m-box"
-        >
           <title-box text="各社区人房数据更新排行">
             <span class="date-span">
-              <el-date-picker
+              <el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
-                v-model="rfphDate"
-                format="yyyy-MM"
-                value-format="yyyy-MM"
-                @change="changeDate"
-                type="month"
-                :clearable="false"
-                placeholder="选择月"
-              >
-              </el-date-picker>
             </span>
           </title-box>
           <sqrfph :currentLevelData="currentLevelData" :date="rfphDate" />
         </div>
-        <div
+        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
-          v-if="currentLevel === 'street' || currentLevel === 'district'"
-          class="m-box"
-        >
           <title-box text="各社区12345投诉事件统计">
             <span class="date-span">
-              <el-date-picker
+              <el-date-picker v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
-                v-model="sq12345Date"
-                format="yyyy-MM"
-                value-format="yyyy-MM"
-                type="month"
-                :clearable="false"
-                placeholder="选择月"
-              />
             </span>
           </title-box>
           <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" />
         </div>
 
         <!-- 社区&网格-->
-        <div
+        <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
-          v-if="currentLevel === 'community' || currentLevel === 'grid'"
-          class="m-box"
-        >
           <title-box text="人房数据动态更新" />
-          <Tabs
+          <Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'" @changeVal="dynamicTypeChange" />
-            v-model="dynamicType"
+          <DynamicHumanRoomData :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 1" />
-            :list="dynamicTypeList"
+          <GridUpdateRanking :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 2" />
-            v-if="currentLevel === 'community'"
-            @changeVal="dynamicTypeChange"
-          />
-          <DynamicHumanRoomData
-            :currentLevelData="currentLevelData"
-            :currentLevel="currentLevel"
-            v-if="dynamicType === 1"
-          />
-          <GridUpdateRanking
-            :currentLevelData="currentLevelData"
-            :currentLevel="currentLevel"
-            v-if="dynamicType === 2"
-          />
         </div>
         <!-- 社区概览-->
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="社区满意度自查结果">
             <span class="date-span">
-              <el-date-picker
+              <el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
-                v-model="sqzcDate"
-                format="yyyy-MM"
-                value-format="yyyy-MM"
-                type="month"
-                :clearable="false"
-                placeholder="选择月"
-              />
             </span>
           </title-box>
-          <CommunityResult
+          <CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" />
-            :currentLevelData="currentLevelData"
-            :date="sqzcDate"
-          />
         </div>
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="事件&回访">
             <span class="date-span">
-              <el-date-picker
+              <el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
-                v-model="sjhfDate"
-                format="yyyy-MM"
-                value-format="yyyy-MM"
-                @change="changeDate"
-                type="month"
-                :clearable="false"
-                placeholder="选择月"
-              />
             </span>
           </title-box>
-          <Tabs
+          <Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange" />
-            v-model="eventType"
+          <EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
-            :list="eventTypeList"
+          <FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" />
-            @changeVal="eventTypeChange"
-          />
-          <EventAndFollowUp
-            :currentLevelData="currentLevelData"
-            :date="sjhfDate"
-            v-if="eventType === 1"
-          />
-          <FollowUp
-            :currentLevelData="currentLevelData"
-            :date="sjhfDate"
-            v-if="eventType === 2"
-          />
         </div>
         <!-- 网格 -->
         <div v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新情况排行">
             <span class="date-span">
-              <el-date-picker
+              <el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
-                v-model="sqwggxDate"
-                format="yyyy-MM"
-                value-format="yyyy-MM"
-                @change="changeDate"
-                type="month"
-                :clearable="false"
-                placeholder="选择月"
-              />
             </span>
           </title-box>
-          <RankingGridData
+          <RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate" />
-            :currentLevelData="currentLevelData"
-            :date="sqwggxDate"
-          />
         </div>
       </div>
     </div>
@@ -355,8 +235,7 @@ export default {
 
   methods: {
     changeCustomerName() {
-      this.customerName =
+      this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
-        localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
     },
     changeType(e) {
       this.peopleType = e;
@@ -402,8 +281,7 @@ export default {
       this.$refs.map.clearMarkert();
       if (item.id) {
         if (item.level == "grid") {
-          this.customerName =
+          this.customerName = item.parentName + "-" + item.name;
-            item.parentName + "-" + item.name;
         } else {
           this.customerName = item.name || item.meta.title;
         }
@@ -412,8 +290,7 @@ export default {
           orgLevel: item.level,
         };
       } else {
-        this.customerName =
+        this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
-          localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
         this.currentLevelData = {
           ...this.$store.state.chooseArea.chooseName,
           orgLevel: this.$store.state.chooseArea.chooseName.level,
@@ -449,10 +326,7 @@ export default {
       if (!item.longitude) {
         return this.$message.error("请先设置坐标");
       }
-      this.$refs.map.setDotMarker(item, [
+      this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
-        parseFloat(item.longitude),
-        parseFloat(item.latitude),
-      ]);
     },
     setNum(data) {
       // data
@@ -483,14 +357,9 @@ export default {
       // }
     },
     //获取地图上显示的组织数据
-    async getMapData(
+    async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
-      orgId = this.$store.state.chooseArea.chooseName.orgId,
-      level = this.$store.state.chooseArea.chooseName.level
-    ) {
       const url = "org_map";
-      this.$http
+      this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => {
-        .post(`/gov/org/agency/maporg`, { orgId, level })
-        .then(({ data: { data } }) => {
         this.orgData = data;
         this.orgId = this.orgData.id;
         this.orgLevel = this.orgData.level;
@@ -499,8 +368,7 @@ export default {
           orgId: this.orgId,
           orgLevel: this.currentLevel,
         };
-          this.peopleType =
+        this.peopleType = this.currentLevel === "grid" ? "unit" : "staffAgency";
-            this.currentLevel === "grid" ? "unit" : "staffAgency";
       });
     },
 
@@ -595,14 +463,10 @@ export default {
   background: #000;
 }
 </style>
-<style
+<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
-  lang="scss"
-  src="@/assets/scss/dataBoard/overview/index.scss"
-  scoped
-></style>
 
 <style lang="scss" scoped>
 .tabs {
-  padding: 16px;
+  padding: 10px 11px 0px;
 }
 </style>