图谱画像动画效果及年月弹窗代码提交

src/assets/scss/dataBoard/overview/index.scss

@@ -16,6 +16,18 @@
 		width: 884px;
 	}
 
+	.g-center-open {
+		position: relative;
+		width: 884px;
+
+		.m-map {
+			position: relative;
+			width: 100%;
+			height: 905px;
+			margin-bottom: 10px;
+		}
+	}
+
 	.g-right {
 		width: 460px;
 	}
@@ -48,15 +60,6 @@
 	animation: move 10s linear infinite;
 }
 
-@keyframes move {
-	0% {
-		transform: translateY(0px);
-	}
-
-	100% {
-		transform: translateY(-320px);
-	}
-}
 
 .m-jdjs {
 	height: 318px;
@@ -133,6 +136,16 @@
 	}
 }
 
+@keyframes move {
+	from {
+		margin-top: -232px;
+	}
+
+	to {
+		margin-top: -0;
+	}
+}
+
 @mixin rounded-corners {
 	width: 76px;
 	height: 76px;
@@ -232,6 +245,9 @@
 
 	&-center {
 		margin-top: 6px;
+		height: 232px;
+
+		&-xiaoqipao {}
 
 		&-line {}
 
@@ -270,8 +286,79 @@
 			}
 		}
 	}
+
+	&-center-two {
+		height: 232px;
+		margin-top: -232px;
+		width: 100%;
+		overflow: hidden;
+
+		img {
+			margin-left: 40px;
+		}
+
+		.daqipao {
+			width: 8px;
+			height: 48px
+		}
+
+		.xiaoqipao {
+			width: 8px;
+			height: 34px
+		}
+	}
+
+	&-center-two .qipao1 {
+		animation: scroll 5s linear infinite;
+	}
+
+	&-center-two .qipao2 {
+		animation: scroll1 7s linear infinite;
+	}
+
+	&-center-two .qipao3 {
+		animation: scroll 6s linear infinite;
+	}
+
+	&-center-two .qipao4 {
+		animation: scroll1 8s linear infinite;
+	}
+
+	&-center-two .qipao5 {
+		animation: scroll 5s linear infinite;
+	}
+
+	&-center-two .qipao6 {
+		animation: scroll1 7s linear infinite;
 	}
 
+	&-center-two .qipao7 {
+		animation: scroll 4s linear infinite;
+	}
+
+	&-center-two .qipao8 {
+		animation: scroll1 6s linear infinite;
+	}
+}
+
+@keyframes scroll {
+	0% {
+		transform: translatey(500%);
+	}
+
+	100% {
+		transform: translatey(-200%);
+	}
+}
+@keyframes scroll1 {
+	0% {
+		transform: translatey(700%);
+	}
+
+	100% {
+		transform: translatey(-200%);
+	}
+}
 
 .m-jdwgy {
 	height: 220px;
@@ -675,3 +762,38 @@
 		border: 0;
 	}
 }
+
+::v-deep .date-current-weiyi {
+	background: rgba(3, 19, 51, 0.9);
+	border-color: #006cff;
+	box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
+
+	.el-date-picker__header-label {
+		color: #a0cdff;
+	}
+
+	.el-picker-panel__icon-btn {
+		color: #a0cdff;
+	}
+
+	.el-month-table {
+		td {
+			.cell {
+				color: #a0cdff;
+			}
+		}
+	}
+
+	.el-month-table td.current:not(.disabled) .cell {
+		color: #fff;
+		background-color: #409eff;
+	}
+
+	.el-month-table td.today:not(.disabled) .cell {
+		color: #0056d6;
+	}
+
+	.el-date-picker__header--bordered {
+		border-bottom: solid 1px #006cff;
+	}
+}

src/views/dataBoard/cpts/details/jmxq.vue

@@ -42,9 +42,7 @@
             </div>
             <div class="eventItem">
               <span>上报时间：</span>
-              <span>{{
+              <span>{{ item.reportTime }}</span>
-                item.reportTime
-              }}</span>
             </div>
             <div class="eventItem">
               <div>需求描述：</div>
@@ -56,7 +54,7 @@
             </div>
             <div class="eventItem">
               <span>需求人电话：</span>
-              <span>{{ item.demandUserMobile }}</span>
+              <span> {{ $sensitive(item.demandUserMobile, 3, 7) }}</span>
             </div>
             <div class="eventItem">
               <span>完成时限：</span>

src/views/dataBoard/cpts/details/smyd.vue

@@ -56,7 +56,7 @@
             </div>
             <div class="eventItem">
               <span>提交人电话：</span>
-              <span>{{ item.mobile }}</span>
+              <span> {{ $sensitive(item.mobile, 3, 7) }}</span>
             </div>
             <div class="eventItem">
               <span>完成时限：</span>

src/views/dataBoard/cpts/details/xqwmz.vue

@@ -56,7 +56,7 @@
             </div>
             <div class="eventItem">
               <span>提交人电话：</span>
-              <span>{{ item.reporterMobile }}</span>
+              <span> {{ $sensitive(item.reporterMobile, 3, 7) }}</span>
             </div>
             <div class="eventItem">
               <span>完成时限：</span>

src/views/dataBoard/cpts/details/yxwxfw.vue

@@ -59,7 +59,7 @@
             </div>
             <div class="eventItem">
               <span>联系电话：</span>
-              <span>{{ formData.principalContact }}</span>
+              <span> {{ $sensitive(formData.principalContact, 3, 7) }}</span>
             </div>
             <div class="eventItem">
               <span>服务方：</span>
@@ -235,6 +235,16 @@ export default {
             this.$message.error(msg);
           }
         });
+      this.$http
+        .post("/governance/icEvent/process", { icEventId: id })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.activities = data;
+          } else {
+            this.$message.error(msg);
+          }
+        });
     },
   },
 };

src/views/dataBoard/cpts/family/modules/businessTables copy/economize.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <el-table-column label="序号" type="index" width="80" />
+      <el-table-column label="不满意事项类型" prop="scope" width="190" />
+      <el-table-column label="不满意事项描述" prop="problemDesc" width="" />
+      <el-table-column label="办理状态" prop="completeFlag" width="120" />
+      <el-table-column label="是否回访" prop="isReturn" width="120" />
+      <el-table-column label="操作" width="90" align="center">
+        <template slot-scope="data">
+          <el-button type="text" @click="handleView(data.row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <smyd :showDialog="showDialog" :id="rowId" @close="close" />
+  </div>
+</template>
+
+<script>
+import smyd from "@/views/dataBoard/cpts/details/smyd.vue";
+export default {
+  name: "economize",
+  components: {
+    smyd,
+  },
+  data() {
+    return {
+      queryParams: {
+        residList: [],
+      },
+      list: [],
+      total: 0,
+      rowId: null,
+      showDialog: false,
+    };
+  },
+  created() {},
+  mounted() {
+    const query = this.$route.query;
+    this.queryParams.residList[0] = query.user_id;
+    this.getList();
+  },
+  methods: {
+    handleView(row) {
+      this.rowId = row.id;
+      this.showDialog = true;
+    },
+    close() {
+      this.showDialog = false;
+    },
+    getList() {
+      // 省满意度列表
+      this.$http
+        .post("/actual/base/peopleRoomOverview/provincialSatisfactionPageList", this.queryParams)
+        .then(({ data: res }) => {
+          this.list = res.data;
+          this.total = res.data.length;
+          this.$emit("changeTotal", { name: 1, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>

src/views/dataBoard/cpts/personnel/index.vue

@@ -4,7 +4,7 @@
       <el-col :span="10">
         <data-title title="居民档案">
           <div style="width: 53%; text-align: right">
-            <a @click="popupShow = true">更多></a>
+            <a @click="popupShow = true">详情></a>
           </div>
         </data-title>
         <MatterDetails />

src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue

@@ -12,9 +12,11 @@
       </div>
       <div class="tag" v-if="data.gridName">{{ data.gridName }}</div>
       <div class="tag small" v-if="data.idNum">
-        {{ data.idNum }}
+        {{ $sensitive(data.idNum, 6, 16) }}
+      </div>
+      <div class="tag" v-if="data.mobile">
+        {{ $sensitive(data.mobile, 3, 7) }}
       </div>
-      <div class="tag" v-if="data.mobile">{{ data.mobile }}</div>
       <div class="tag small" v-if="data.householdSituation">
         {{ data.householdSituation }}
       </div>

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

@@ -43,7 +43,6 @@
       </div>
     </div>
     <div class="m-jdhx-center">
-      <div class="m-jdhx-center-line"></div>
       <div class="m-jdhx-center-content">
         <div class="m-jdhx-center-content-item">
           <div class="m-jdhx-center-content-item-jumin">
@@ -74,7 +73,16 @@
           </div>
         </div>
       </div>
-      <div class="m-jdhx-center-line"></div>
+    </div>
+    <div class="m-jdhx-center-two">
+      <img class="daqipao qipao1" src="@/assets/images/overview/qipao.png" />
+      <img class="xiaoqipao qipao2" src="@/assets/images/overview/qipao-xiao.png" />
+      <img class="daqipao qipao3" src="@/assets/images/overview/qipao.png" />
+      <img class="xiaoqipao qipao4" src="@/assets/images/overview/qipao-xiao.png" />
+      <img class="daqipao qipao5" src="@/assets/images/overview/qipao.png" />
+      <img class="xiaoqipao qipao6" src="@/assets/images/overview/qipao-xiao.png" />
+      <img class="daqipao qipao7" src="@/assets/images/overview/qipao.png" />
+      <img class="xiaoqipao qipao8" src="@/assets/images/overview/qipao-xiao.png" />
     </div>
     <div class="m-jdhx-top">
       <div class="m-jdhx-card">

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

@@ -24,7 +24,7 @@
       </el-table>
       <el-table v-if="currentLevelData.orgLevel == 'grid'" :data="wglist" v-loading="loading" max-height="190px" height="190px">
         <el-table-column label="序号" type="index" width="50" />
-        <el-table-column prop="name" width="140" label="微网格" />
+        <el-table-column prop="name" width="140" label="组织名称" />
         <el-table-column prop="type" width="90" label="类型">
           <template slot-scope="scope">
             <span :style="'color:' + scope.row.type">{{ types[scope.row.type] }}</span>
@@ -103,7 +103,6 @@ export default {
       }
     },
     handleClick(item) {
-      console.log("handleClick::", item);
       if (this.currentLevelData.orgLevel == "grid") {
         this.$router.push({
           path: "/homeDetails/index",

src/views/dataBoard/overview/index.vue

@@ -42,7 +42,10 @@
         </div>
       </div>
       <div class="g-center">
-        <div class="m-map" style="overflow: hidden">
+        <div
+          :class="listShow ? 'm-map' : 'g-center-open'"
+          style="overflow: hidden"
+        >
           <map-top
             :currentLevelData="currentLevelData"
             @changeType="changeType"
@@ -60,8 +63,24 @@
           />
         </div>
         <div class="m-box m-rybox">
-          <title-box :text="`${customerName}${peopleList[peopleType]}`"/>
+          <title-box :text="`${customerName}${peopleList[peopleType]}`">
+            <div class="up-style" style="width: 51%">
+              <div>
+                <img
+                  v-if="listShow"
+                  @click="upDownShow"
+                  src="~@/assets/images/overview/down-icon.png"
+                />
+                <img
+                  v-else
+                  @click="upDownShow"
+                  src="~@/assets/images/overview/up-icon.png"
+                />
+              </div>
+            </div>
+          </title-box>
           <jdwgy
+            v-show="listShow"
             :peopleType="peopleType"
             :currentLevelData="currentLevelData"
             @setNum="setNum"
@@ -76,20 +95,44 @@
           <rfsjtj :currentLevelData="currentLevelData" />
         </div>
         <!-- 街道概览 -->
-        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
+        <div
+          v-if="currentLevel === 'street' || currentLevel === 'district'"
+          class="m-box"
+        >
           <title-box text="各社区人房数据更新排行">
             <span class="date-span">
-              <el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
+              <el-date-picker
-                              type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
+                popper-class="date-current-weiyi"
+                :append-to-body="false"
+                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 v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
+        <div
+          v-if="currentLevel === 'street' || currentLevel === 'district'"
+          class="m-box"
+        >
           <title-box text="各社区12345投诉事件统计">
             <span class="date-span">
-              <el-date-picker v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month"
+              <el-date-picker
-                              :clearable="false" placeholder="选择月"/>
+                popper-class="date-current-weiyi"
+                :append-to-body="false"
+                v-model="sq12345Date"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
           <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" />
@@ -120,8 +163,16 @@
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="社区满意度自查结果">
             <span class="date-span">
-              <el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false"
+              <el-date-picker
-                              placeholder="选择月"/>
+                popper-class="date-current-weiyi"
+                :append-to-body="false"
+                v-model="sqzcDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
           <CommunityResult
@@ -132,8 +183,17 @@
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="事件&回访">
             <span class="date-span">
-              <el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
+              <el-date-picker
-                              type="month" :clearable="false" placeholder="选择月"/>
+                popper-class="date-current-weiyi"
+                :append-to-body="false"
+                v-model="sjhfDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                @change="changeDate"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
           <Tabs
@@ -156,8 +216,17 @@
         <div v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新情况排行">
             <span class="date-span">
-              <el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
+              <el-date-picker
-                              type="month" :clearable="false" placeholder="选择月"/>
+                popper-class="date-current-weiyi"
+                :append-to-body="false"
+                v-model="sqwggxDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                @change="changeDate"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
           <RankingGridData
@@ -284,6 +353,7 @@ export default {
       ],
       customerName: "",
       peopleType: "staffAgency",
+      listShow: true,
     };
   },
 
@@ -356,7 +426,7 @@ export default {
     },
 
     clickAgencyItem(item) {
-      this.$refs.map.clearMarkert()
+      this.$refs.map.clearMarkert();
       if (item.id) {
         this.customerName = item.name || item.meta.title;
         this.currentLevelData = {
@@ -399,32 +469,38 @@ export default {
       if (!item.longitude) {
         return this.$message.error("请先设置坐标");
       }
-      this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
+      this.$refs.map.setDotMarker(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
     },
     setNum(data) {
-      console.log(this.orgData,data,'111')
+      console.log(this.orgData, data, "111");
       // data
-      let params = []
+      let params = [];
-      let org = this.orgData.children
+      let org = this.orgData.children;
-      org.forEach(item => {
+      org.forEach((item) => {
-        data.forEach(item2 => {
+        data.forEach((item2) => {
           if (item2.orgId === item.id && item.coordinates) {
             params.push({
               ...item2,
               peopleType: this.peopleList[this.peopleType],
               latitude: item.latitude,
-              longitude: item.longitude
+              longitude: item.longitude,
-            })
+            });
           }
-        })
+        });
-      })
+      });
       if (params.length) {
-        this.$refs.map.setNum(params)
+        this.$refs.map.setNum(params);
       }
     },
+    upDownShow() {
+      this.listShow = !this.listShow;
+    },
     setPoint(data) {
       if (data) {
-        this.$refs.map.setPoint(data)
+        this.$refs.map.setPoint(data);
       }
     },
     //获取地图上显示的组织数据
@@ -433,17 +509,20 @@ export default {
       level = this.$store.state.chooseArea.chooseName.level
     ) {
       const url = "org_map";
-      this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
+      this.$http
+        .post(`/gov/org/agency/maporg`, { orgId, level })
+        .then(({ data: { data } }) => {
           this.orgData = data;
           this.orgId = this.orgData.id;
-        console.log(this.orgId)
+          console.log(this.orgId);
           this.orgLevel = this.orgData.level;
           this.currentLevel = this.orgData.agencyLevel;
           this.currentLevelData = {
             orgId: this.orgId,
             orgLevel: this.currentLevel,
           };
-        this.peopleType = this.currentLevel === 'grid'?'unit':'staffAgency';
+          this.peopleType =
+            this.currentLevel === "grid" ? "unit" : "staffAgency";
         });
     },
 
@@ -505,6 +584,16 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.up-style {
+  width: 51%;
+  img {
+    height: 12px;
+    width: 12px;
+  }
+  img:hover {
+    cursor: pointer;
+  }
+}
 .go-back {
   position: absolute;
   z-index: 100;
@@ -521,8 +610,15 @@ export default {
     cursor: pointer;
   }
 }
+.date-current-weiyi{
+  background: #000;
+}
 </style>
-<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
 
 <style lang="scss" scoped>
 .tabs {