业务记录详情页,房屋画像完成

.env.development

@@ -1,8 +1,8 @@
 NODE_ENV=development
 
 # VUE_APP_API_SERVER =  https://epmet-preview.elinkservice.cn/api
-VUE_APP_API_SERVER =  http://localhost:9001/api
-# VUE_APP_API_SERVER =  http://192.168.1.140/api
+# VUE_APP_API_SERVER =  http://localhost:9001/api
+VUE_APP_API_SERVER =  http://192.168.1.144/api
 # VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
 # VUE_APP_API_SERVER =  https://epmet-yantai.elinkservice.cn/api
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api

src/assets/scss/pages/huaxiang.scss

@@ -33,8 +33,6 @@
         .right{
             flex: 1;
             overflow-y: scroll;
-            display: flex;
-            justify-content: space-between;
         }
    }
    

src/views/modules/portrayal/fangwu/cpts/rightBto.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="table">
+      <el-table v-if="list.length > 0" :data="list" max-height="390px" height="390px">
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column label="变更人" prop="resiName" width="140" />
+        <el-table-column label="变更类型" prop="typeName" width="" />
+        <el-table-column label="变更前" prop="beforeChange" width="120" />
+        <el-table-column label="变更后" prop="afterChange" width="120" />
+        <el-table-column label="操作人" prop="operatorName" width="120" />
+        <el-table-column label="调整时间" prop="changeTime" width="190" />
+      </el-table>
+  
+      <div v-else style="width: 100%; height: 100%; text-align: center; padding-top: 120px">
+        <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
+        <div style="color: #fff">暂无数据</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+        houseId: {
+        type: String,
+        default:''
+      },
+    },
+    data() {
+      return {
+        list: [],
+        total: 0,
+      };
+    },
+    created() {
+      this.getList();
+    },
+    watch: {
+    },
+    methods: {
+      getList() {
+       
+        // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+        const completeFlags = {
+          "-2": "未知",
+          "-1": "不接受回访",
+          0: "接受回访/待回访",
+          1: "已回访",
+        };
+        // 省满意度列表
+        this.$http.get("/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=" + this.houseId).then(({ data: res }) => {
+          this.list = res.data.map((item) => {
+            return {
+              ...item,
+              completeFlag: completeFlags[item.completeFlag],
+            };
+          });
+          this.total = res.data.length;
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .business-records {
+    margin-bottom: 25px;
+  }
+  </style>
+  

src/views/modules/portrayal/fangwu/index.vue

@@ -19,7 +19,8 @@
                     <div class="title">
                         <div><img src="../../../../assets/images/index/title-icon-ywjl.png" alt="">各项业务记录</div>
                     </div>
-                    <right-top :houseInfo="houseInfo" :familyResiList="familyResiList" :type="'1'"  :key="houseInfo.houseId"></right-top>
+                    <right-top v-if="childrenFlag" :houseInfo="houseInfo" :familyResiList="familyResiList" :type="'1'"
+                        :key="houseInfo.houseId"></right-top>
                 </div>
             </div>
         </div>
@@ -35,25 +36,16 @@
                 </div>
             </div>
             <div class="right">
-                <div class="card  f-w50 right16">
+                <div class="card   right16">
                     <div class="title">
-                        <div><img src="../../../../assets/images/index/title-icon-xsfw.png" alt="">享受服务次数统计</div>
+                        <div><img src="../../../../assets/images/index/title-icon-rkbh.png" alt="">人口变化情况</div>
                     </div>
                     <div>
-                        <!-- <xiangshoufuwu :key="houseInfo.houseId"/> -->
-                    </div>
-                </div>
-                <div class="card" style="width: calc(50% - 16px);">
-                    <div class="title">
-                        <div><img src="../../../../assets/images/index/title-icon-jfjl.png" alt="">积分记录</div>
-                    </div>
-                    <div class="card">
-                        <!-- <pointsRecord :houseId="houseInfo.houseId" :key="houseInfo.houseId" /> -->
+                        <right-bto :houseId="houseInfo.houseId"  :key="houseInfo.houseId" />
                     </div>
                 </div>
             </div>
         </div>
-        <resi-info v-if="showedResiInfo && houseInfo.houseId" :resi-id="houseInfo.houseId" @close="showedResiInfo = false" />
     </div>
 </template>
 <script>
@@ -61,11 +53,8 @@ import { requestPost, requestGet } from '@/js/dai/request'
 import leftTop from "./cpts/leftTop";
 import leftBto from "../jumin/cpts/leftBto";
 import rightTop from "../jumin/cpts/rightTop";
-// import rightBto from "./cpts/rightBto";
-import resiInfo from "@/views/modules/cpts/resi/info";
+import rightBto from "./cpts/rightBto";
 import nextTick from "dai-js/tools/nextTick";
-// import pointsRecord from "./cpts/pointsRecord";
-// import xiangshoufuwu from "./cpts/xiangshoufuwu";
 
 
 export default {
@@ -74,7 +63,8 @@ export default {
         return {
             houseInfo: {},
             showedResiInfo: false,
-            familyResiList:[]
+            familyResiList: [],
+            childrenFlag: false
         };
     },
     //创建前
@@ -86,6 +76,15 @@ export default {
     },
     activated() {
         this.houseInfo = this.$store.state.huaXiang.houseInfo
+        this.getFamilyRelationshipList()
+    },
+
+    watch: {
+        '$route': function (to, from) {
+            if (to.path != '/main/fangwu-huaxiang') {
+                this.childrenFlag = false
+            }
+        }
     },
     //方法
     methods: {
@@ -94,10 +93,10 @@ export default {
             let { code, data, msg } = await requestPost(url)
             if (code == 0) {
                 this.familyResiList = data.map(item => item.id)
-                console.log(this.familyResiList,'父组件传递')
             } else {
                 this.$message.error(msg)
             }
+            this.childrenFlag = true
         },
 
         changeTotal(val) {
@@ -106,11 +105,10 @@ export default {
     },
     //子组件注册
     // leftTop, leftBto, resiInfo, rightTop, pointsRecord, rightBto, xiangshoufuwu
-    components: {leftTop,leftBto,rightTop },
+    components: { leftTop, leftBto, rightTop, rightBto },
     //计算
     computed: {},
     //监听
-    watch: {},
 }
 </script>
 

src/views/modules/portrayal/jumin/cpts/details/fwdetail.vue

@@ -0,0 +1,206 @@
+<template>
+  <el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+    @close="handleClose" title="服务详情">
+    <div class="eventWrap">
+      <el-row :gutter="32">
+        <el-col :span="23" style="padding-left: 40px">
+          <div class="leftEvent">
+            <div class="eventItem">
+              <span>所属组织：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务类型：</span>
+              <span>{{
+                formData.customerId && getFwType(formData.customerId)
+              }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务事项：</span>
+              <span>{{ formData.serviceName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务时间：</span>
+              <span>{{ formData.serviceTimeStart || '--' }} ~
+                {{ formData.serviceTimeEnd || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务内容：</span>
+              <span style="margin-top: 20px">{{ formData.remark || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>经办人：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>联系电话：</span>
+              <span> {{ $sensitive(formData.principalContact, 3, 7) }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务方：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>政策依据：</span>
+              <span>{{ formData.policyTitle || '--' }}</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  name: "ReportAnEvent",
+  components: {
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      item: {},
+      loading: false,
+      activities: [],
+
+
+      // 服务类型。
+      serviceTypesLevel1: [],
+      formData: {}
+    };
+  },
+
+  computed: {},
+  watch: {
+    showDialog: {
+      handler(val) {
+        if (val) {
+          this.getDetailsData(this.id);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.$http
+      .get("/governance/commonServiceType/selectList/0")
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg);
+        } else {
+          this.serviceTypesLevel1 = res.data;
+        }
+      })
+      .catch(() => {
+        return this.$message.error("网络错误");
+      });
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+      this.item = {};
+    },
+
+    openImg(src) {
+      window.open(src);
+    },
+
+    getTrueTime(time) {
+      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+    },
+
+    getFwType(value) {
+      if (this.serviceTypesLevel1.length > 0 && value) {
+        return this.serviceTypesLevel1.filter(
+          (item) => item.customerId == value
+        )[0].name;
+      }
+      return "";
+    },
+    getDetailsData(id) {
+      this.loading = true;
+      this.$http
+        .post("/governance/icServiceRecordV2/detail", {
+          serviceRecordId: id,
+        })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.formData = data;
+            this.loading = false;
+          } else {
+            this.loading = false;
+            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);
+      //     }
+      //   });
+    },
+  },
+};
+</script>
+  
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.eventWrap {
+  width: 1094px;
+  max-height: 798px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+
+  .eventDetails {
+    font-size: 18px;
+    margin: 48px 24px 48px 0;
+
+    img {
+      margin-top: -4px;
+      margin-right: 8px;
+    }
+  }
+
+  .m-info {
+    padding: 0px !important;
+
+    .m-process {
+      margin: 0 !important;
+
+      .detail {
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+
+  .leftEvent {
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+
+    }
+  }
+}
+</style>
+  

src/views/modules/portrayal/jumin/cpts/details/shengdetail.vue

@@ -0,0 +1,189 @@
+<template>
+    <el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+        @close="handleClose" title="省满意度调查不满意事项详情">
+        <div class="eventWrap">
+            <el-row :gutter="32">
+                <el-col :span="23" style="padding-left: 40px">
+                    <div class="leftEvent">
+                        <div class="eventItem">
+                            <span>所属组织：</span>
+                            <span>{{ item.agencyName || '--' }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>不满意事项来源：</span>
+                            <span>省满意度调查</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>不满意事项类型：</span>
+                            <span>{{ item.scopeId && getSxType(item.scopeId) }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>所属月份：</span>
+                            <span>{{
+                                item.createdTime && getMonthData(item.createdTime)
+                            }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <div>不满意事项描述：</div>
+                            <div style="margin-top: 20px">{{ item.problemDesc || '--' }}</div>
+                        </div>
+                        <div class="eventItem">
+                            <span>提交人姓名：</span>
+                            <span>{{ item.name || '--' }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>提交人电话：</span>
+                            <span> {{ $sensitive(item.mobile, 3, 7) }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>完成时限：</span>
+                            <span>{{ item.completeTime || '--' }}</span>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </el-dialog>
+</template>
+  
+<script>
+
+export default {
+    components: {
+    },
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+        showDialog: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            item: {
+                logList: [],
+            },
+            loading: false,
+            loading1: false,
+            activities: [],
+            // 不满意类型列表
+            satisfactionCategoryOptions: [],
+        };
+    },
+    computed: {},
+    watch: {
+        showDialog: {
+            handler(val) {
+                if (val) {
+                    this.getDetailsData(this.id);
+                }
+            },
+            immediate: true,
+        },
+    },
+    mounted() { },
+
+    methods: {
+        handleClose() {
+            this.$emit("close", false);
+            this.item = {};
+        },
+
+        openImg(src) {
+            window.open(src);
+        },
+
+        getTrueTime(time) {
+            return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+        },
+
+        getSxType(value) {
+            if (this.satisfactionCategoryOptions.length > 0 && value) {
+                return this.satisfactionCategoryOptions.filter(
+                    (item) => item.value == value
+                )[0].label;
+            }
+            return "";
+        },
+        getMonthData(time) {
+            if (time) {
+                return this.$moment(time).format("YYYY年MM月");
+            }
+            return "";
+        },
+        getDetailsData(id) {
+            this.loading = true;
+            this.$http
+                .post("/governance/provinceEvaluationRecord/" + id)
+                .then((res) => {
+                    this.loading = false;
+                    const { code, data, msg } = res.data;
+                    if (code === 0) {
+                        this.item = data;
+                    } else {
+                        this.$message.error(msg);
+                    }
+                });
+            this.$http
+                .get(
+                    "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource="
+                )
+                .then(({ data: { data } }) => {
+                    this.satisfactionCategoryOptions = data.map((item) => {
+                        return {
+                            label: item.categoryName,
+                            value: item.categoryCode,
+                        };
+                    });
+                });
+        },
+    },
+};
+</script>
+  
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.eventWrap {
+    width: 1094px;
+    max-height: 798px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+
+    .eventDetails {
+        font-size: 18px;
+        margin: 48px 24px 48px 0;
+
+        img {
+            margin-top: -4px;
+            margin-right: 8px;
+        }
+    }
+    .m-info {
+        padding: 0px !important;
+
+        .m-process {
+            margin: 0 !important;
+            .detail {
+                .detail-field {
+                    flex: none !important;
+                }
+            }
+        }
+    }
+
+    .leftEvent {
+        .eventItem {
+            font-size: 14px;
+            margin-bottom: 24px;
+        }
+    }
+}
+</style>
+  

src/views/modules/portrayal/jumin/cpts/details/sjdetail.vue

@@ -0,0 +1,307 @@
+<template>
+  <el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+    @close="handleClose" title="事件详情">
+    <div class="eventWrap">
+      <el-row :gutter="32">
+        <el-col :span="13" style="padding-left: 40px">
+          <div class="leftEvent">
+
+            <div class="eventItem">
+              <span>所属组织：</span>
+              <span>{{ item.gridName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>上报渠道：</span>
+              <span>{{ item.sourceTypeName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>事件类型：</span>
+              <span>{{ item.categoryName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>接受时间：</span>
+              <span>{{ item.happenTime || '--' }}</span>
+            </div>
+            <!--            <div class="eventItem">
+                            <span>工单号：</span>
+                            <span>{{ item.workOrderNum }}</span>
+                          </div>-->
+            <div class="eventItem">
+              <div>问题描述：</div>
+              <div style="margin-top: 20px">{{ item.eventContent || '--' }}</div>
+            </div>
+            <!--            <div class="eventItem">
+                            <div>图片：</div>
+                            <div style="margin-top: 20px; display: flex">
+                              <img
+                                style="width: 100px; height: 100px; margin-right: 5px"
+                                v-for="src in item.imageList"
+                                :key="src"
+                                :src="src"
+                                alt="/"
+                                @click="openImg(src)"
+                              />
+                            </div>
+                          </div>-->
+            <div class="eventItem">
+              <span>联系人：</span>
+              <span>{{ item.name || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>联系电话：</span>
+              <span>{{ item.mobile || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>详细地址：</span>
+              <span>{{ item.address || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>办结时限：</span>
+              <span>{{ item.latestOperatedTime || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>满意度评价：</span>
+              <span>{{ item.satisfactionName || '--' }}</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="11">
+          <div class="rightEvent m-info">
+            <div class="eventDetails">
+              <img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展
+            </div>
+            <!-- <el-timeline class="timeline" :reverse="true">
+                  <el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''">
+                    <div class="status-box">
+                      <div class="status1" v-if="index == activities.length - 1">回复</div>
+                      <div class="status2" v-else>完成并回复</div>
+                      <div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div>
+                    </div>
+                    <div class="content">
+                      <div class="field">回复人：</div>
+                      <div class="value">{{ item.departmentName }}</div>
+                    </div>
+                    <div class="content">
+                      <div class="field">回复内容：</div>
+                      <div class="value">{{ item.publicReply }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline> -->
+            <div v-if="activities.length > 0">
+              <!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> -->
+              <div class="m-process">
+                <div class="list">
+                  <div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId"
+                    v-for="(item, index) in activities">
+                    <div class="item-row">
+                      <template v-if="item.agencyId">
+                        <div class="name">指派</div>
+                      </template>
+                      <template v-if="!item.timeLimit">
+                        <div class="name">完成并回复</div>
+                      </template>
+                      <template v-if="!item.agencyId && item.timeLimit">
+                        <div class="name">{{ item.processName || '--' }}</div>
+                      </template>
+                      <div class="date">
+                        {{
+                          item.processTime ? getTrueTime(item.processTime) : ""
+                        }}
+                      </div>
+                    </div>
+                    <div v-if="item.type === 'event'">
+                      <template v-if="item.agencyId">
+                        <div class="detail">
+                          <div class="detail-field">指派人：</div>
+                          <div class="detail-value">
+                            {{ item.departmentName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">指派部门：</div>
+                          <div class="detail-value">
+                            {{ item.agencyName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">转办意见：</div>
+                          <div class="detail-value">
+                            {{ item.publicReply || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">办结时限：</div>
+                          <div class="detail-value">
+                            {{ item.timeLimit || '--' }}
+                          </div>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div class="detail">
+                          <div class="detail-field">回复人：</div>
+                          <div class="detail-value">
+                            {{ item.departmentName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">回复内容：</div>
+                          <div class="detail-value">
+                            {{ item.publicReply || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail" v-if="item.timeLimit">
+                          <div class="detail-field">办结时限：</div>
+                          <div class="detail-value">
+                            {{ getTrueTime(item.timeLimit) }}
+                          </div>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- </el-card> -->
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  name: "ReportAnEvent",
+  components: {
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      item: {},
+      loading: false,
+      loading1: false,
+      activities: [],
+    };
+  },
+
+  computed: {},
+  watch: {
+    showDialog: {
+      handler(val) {
+        if (val) {
+          this.getDetailsData(this.id);
+          this.getProcessData(this.id);
+        } else {
+          this.item = {}
+          this.activities = []
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+      this.item = {};
+    },
+
+    openImg(src) {
+      window.open(src);
+    },
+
+    getTrueTime(time) {
+      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+    },
+
+    getDetailsData(id) {
+      this.loading = true;
+      this.$http
+        .post("/governance/icEvent/detail", { icEventId: id })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.item = data;
+            this.loading = false;
+          } else {
+            this.loading = false;
+            this.$message.error(msg);
+          }
+        });
+    },
+
+    getProcessData(id) {
+      this.$http
+        .post("/governance/icEvent/process", { icEventId: id })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.activities = data;
+            this.loading1 = false;
+          } else {
+            this.loading1 = false;
+            this.$message.error(msg);
+          }
+        });
+    },
+  },
+};
+</script>
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+@import "@/assets/scss/dataBoard/dialog.scss";
+
+.eventWrap {
+  width: 1094px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+
+  .eventDetails {
+    font-size: 18px;
+    margin: 48px 24px 48px 0;
+
+    img {
+      margin-top: -4px;
+      margin-right: 8px;
+    }
+  }
+
+  .m-info {
+    padding: 0px !important;
+
+    .m-process {
+      margin: 0 !important;
+
+      .detail {
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+
+  .leftEvent {
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+
+      span:first-child {}
+    }
+  }
+}
+</style>
+  

src/views/modules/portrayal/jumin/cpts/details/sqdetail.vue

@@ -0,0 +1,283 @@
+<template>
+    <el-dialog
+      width="818px"
+      :modal="true"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible="showDialog"
+      @close="handleClose"
+      title="社区满意度自查不满意事项详情"
+    >
+      <div class="eventWrap">
+        <el-row :gutter="32">
+          <el-col :span="24" style="padding-left: 40px">
+          </el-col>
+          <el-col
+            :span="23"
+            style="padding-left: 40px"
+          >
+            <div class="leftEvent">
+              
+              <!-- <div class="eventItem">
+                <span>所属组织：</span>
+                <span>{{ item.agencyName }}</span>
+              </div> -->
+              <div class="eventItem">
+                <span>不满意事项来源：</span>
+                <span>社区意度自查</span>
+              </div>
+              <div class="eventItem">
+                <span>不满意事项类型：</span>
+                <span>{{ getSxType(item) }}</span>
+              </div>
+              <!-- <div class="eventItem">
+                <span>所属月份：</span>
+                <span>{{
+                  item.createdTime && getMonthData(item.createdTime)
+                }}</span>
+              </div> -->
+              <div class="eventItem">
+                <div>不满意事项描述：</div>
+                <div style="margin-top: 20px">{{ getSxReason(item) }}</div>
+              </div>
+              <div class="eventItem">
+                <span>提交人姓名：</span>
+                <span>{{ item.reporterName || '--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>提交人电话：</span>
+                <span> {{ $sensitive(item.reporterMobile, 3, 7) }}</span>
+              </div>
+              <!-- <div class="eventItem">
+                <span>完成时限：</span>
+                <span>{{ item.completeTime }}</span>
+              </div> -->
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script>
+  
+  export default {
+    components: {
+    },
+    props: {
+      id: {
+        type: String,
+        default: "",
+      },
+      showDialog: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    data() {
+      return {
+        item: {
+          logList: [],
+        },
+        loading: false,
+        // 不满意类型列表
+        satisfactionCategoryOptions: [
+          {
+            key: "evaCulturalFacility",
+            value: "文化设施",
+          },
+          {
+            key: "evaSportsFacility",
+            value: "体育设施",
+          },
+          {
+            key: "evaEcologicalEnv",
+            value: "生态环境",
+          },
+          {
+            key: "evaSocialSecurity",
+            value: "社会治安",
+          },
+          {
+            key: "evaocialAssistance",
+            value: "社会救助",
+          },
+          {
+            key: "evaOldPeopleProvide",
+            value: "老有所养",
+          },
+          {
+            key: "evaBasicEducation",
+            value: "基础教育",
+          },
+          {
+            key: "evaMedical",
+            value: "病有所医",
+          },
+        ],
+        reason: [
+          "basicEducationReason",
+          "culturalFacilityReason",
+          "ecologicalEnvReason",
+          "medicalReason",
+          "oldPeopleProvideReason",
+          "socialAssistanceReason",
+          "socialSecurityReason",
+          "sportsFacilityReason",
+        ],
+      };
+    },
+  
+    computed: {},
+    watch: {
+      showDialog: {
+        handler(val) {
+          if (val) {
+            this.getDetailsData(this.id);
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {},
+  
+    methods: {
+      handleClose() {
+        this.$emit("close", false);
+        this.item = {};
+      },
+  
+      openImg(src) {
+        window.open(src);
+      },
+  
+      getTrueTime(time) {
+        return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+      },
+  
+      getSxType(row) {
+        let arr = [];
+        let text = "";
+        for (let k in row) {
+          if (row[k] == "bad") {
+            arr.push(k);
+          }
+        }
+        this.satisfactionCategoryOptions.forEach((item) => {
+          arr.forEach((item1) => {
+            if (item1 == item.key) {
+              if (text == "") {
+                text = item.value;
+              } else {
+                text = text + "， " + item.value;
+              }
+            }
+          });
+        });
+        return text;
+      },
+      getSxReason(row) {
+        let text = "";
+        this.reason.forEach((item) => {
+          for (let key in row) {
+            if (item == key && row[key]) {
+              if (text == "") {
+                text = row[key];
+              } else {
+                text = text + "；" + row[key];
+              }
+            }
+          }
+        });
+        return text;
+      },
+      getMonthData(time) {
+        if (time) {
+          return this.$moment(time).format("YYYY年MM月");
+        }
+        return "";
+      },
+      getDetailsData(id) {
+        this.loading = true;
+        this.$http
+          .get(
+            "/governance/satisfaction/communitySelfInsp/inspResult/detail/" + id
+          )
+          .then((res) => {
+            this.loading = false;
+            const { code, data, msg } = res.data;
+            if (code === 0) {
+              this.item = { ...data.reporter, ...data.satisfaction };
+            } else {
+              this.$message.error(msg);
+            }
+          });
+        // this.$http
+        //   .post("/governance/provinceEvaluationRecord/" + id)
+        //   .then((res) => {
+        //     this.loading = false;
+        //     const { code, data, msg } = res.data;
+        //     if (code === 0) {
+        //       this.item = data;
+        //     } else {
+        //       this.$message.error(msg);
+        //     }
+        //   });
+        // this.$http
+        //   .get(
+        //     "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource="
+        //   )
+        //   .then(({ data: { data } }) => {
+        //     console.log('data::', data);
+        //     this.satisfactionCategoryOptions = data.map((item) => {
+        //       return {
+        //         label: item.categoryName,
+        //         value: item.categoryCode,
+        //       };
+        //     });
+        //   });
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  @import "@/assets/scss/modules/shequzhili/event-info.scss";
+  .eventWrap {
+    width: 1094px;
+    // max-height: 798px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+    .eventDetails {
+      font-size: 18px;
+      margin: 48px 24px 48px 0;
+      img {
+        margin-top: -4px;
+        margin-right: 8px;
+      }
+    }
+  
+    .m-info {
+      padding: 0px !important;
+  
+      .m-process {
+        margin: 0 !important;
+        .detail {
+          .detail-field {
+            flex: none !important;
+          }
+        }
+      }
+    }
+  
+    .leftEvent {
+  
+      .eventItem {
+        font-size: 14px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+  </style>
+  

src/views/modules/portrayal/jumin/cpts/details/xqdetail.vue

@@ -0,0 +1,188 @@
+<template>
+    <el-dialog
+      width="818px"
+      :modal="true"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible="showDialog"
+      @close="handleClose"
+      title="需求详情"
+    >
+      <div class="eventWrap">
+        <el-row :gutter="32">
+          
+          <el-col
+            :span="23"
+            style="padding-left: 40px"
+          >
+            <div class="leftEvent">
+              <div class="eventItem">
+                <span>所属组织：</span>
+                <span>{{ item.gridName||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报渠道：</span>
+                <span>{{ item.reportTypeName||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求类型：</span>
+                <span>{{ item.categoryName ||'--'}}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报时间：</span>
+                <span>{{ item.reportTime||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <div>需求描述：</div>
+                <div style="margin-top: 20px">{{ item.locationDetail ||'--'}}</div>
+              </div>
+              <div class="eventItem">
+                <span>需求人姓名：</span>
+                <span>{{ item.demandUserName ||'--'}}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求人电话：</span>
+                <span> {{ $sensitive(item.demandUserMobile, 3, 7) }}</span>
+              </div>
+              <div class="eventItem">
+                <span>完成时限：</span>
+                <span>{{ item.wantServiceTime||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求人住址：</span>
+                <span>{{ item.serviceAddress||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报人：</span>
+                <span>{{ item.reportUserName||'--' }}</span>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script>
+  export default {
+    name: "ReportAnEvent",
+    components: {
+ 
+    },
+    props: {
+      id: {
+        type: String,
+        default: "",
+      },
+      showDialog: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    data() {
+      return {
+        item: {
+          logList: [],
+        },
+        loading: false,
+        loading1: false,
+        activities: [],
+      };
+    },
+  
+    computed: {},
+    watch: {
+      showDialog: {
+        handler(val) {
+          if (val) {
+            this.getDetailsData(this.id);
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {},
+  
+    methods: {
+      handleClose() {
+        this.$emit("close", false);
+        this.item = {};
+      },
+  
+      openImg(src) {
+        window.open(src);
+      },
+  
+      getTrueTime(time) {
+        return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+      },
+  
+      getDetailsData(id) {
+        this.loading = true;
+  
+        let params = {
+          demandRecId: id,
+        };
+        this.$http
+          .post("/governance/userdemand/demandDetail", params)
+          .then((res) => {
+            this.loading = false;
+            const { code, data, msg } = res.data;
+            if (code === 0) {
+              this.item = data;
+            } else {
+              this.$message.error(msg);
+            }
+          });
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  @import "@/assets/scss/modules/shequzhili/event-info.scss";
+  .eventWrap {
+    width: 1094px;
+    height: 610px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+  
+    .eventDetails {
+      font-size: 18px;
+      margin: 48px 24px 48px 0;
+  
+      img {
+        margin-top: -4px;
+        margin-right: 8px;
+      }
+    }
+  
+    .m-info {
+      padding: 0px !important;
+  
+      .m-process {
+        margin: 0 !important;
+        .detail {
+          .detail-field {
+            flex: none !important;
+          }
+        }
+      }
+    }
+  
+    .leftEvent {
+      .eventItem {
+        font-size: 14px;
+        margin-bottom: 24px;
+  
+        span:first-child {
+        }
+  
+        span:last-child {
+        }
+      }
+    }
+  }
+  </style>
+  

src/views/modules/portrayal/jumin/cpts/leftBto.vue

@@ -11,10 +11,10 @@
                     }}）
                 </div>
                 <div>
-                    <span>人户状况：</span>{{item.householdSituation||'--'}}
+                    <span style="color:#6b6c6d;">人户状况：</span>{{item.householdSituation||'--'}}
                 </div>
                 <div>
-                    <span>居民分类：</span>{{item.resiCategory||'--'}}
+                    <span style="color:#6b6c6d;">居民分类：</span>{{item.resiCategory||'--'}}
                 </div>
             </div>
         </div>

src/views/modules/portrayal/jumin/cpts/leftTop.vue

@@ -10,7 +10,7 @@
             <span class="label gray">所属网格：</span><span class="value">{{ resiInfo.gridName||"--" }}</span>
         </div>
         <div class="item f-font14">
-            <span class="label gray">入户状况：</span><span class="value">{{ resiInfo.householdSituation||"--" }}</span>
+            <span class="label gray">人户状况：</span><span class="value">{{ resiInfo.householdSituation||"--" }}</span>
         </div>
         <div class="item f-font14">
             <!-- 居住类型,与子女同住,空巢,独居,其他 字段没有返回-->

src/views/modules/portrayal/jumin/cpts/rightTop.vue

@@ -135,7 +135,6 @@ export default {
         } else if (this.type == '1') {
             this.resiId = this.familyResiList
         }
-        console.log(this.resiId, '子组件获取');
     },
     async mounted() {
         await this.getComplainList()
@@ -258,6 +257,10 @@ export default {
                 pageNo: this.pageNo,
                 pageSize: this.pageSize
             }
+            const statusArr = {
+                processing: "处理中",
+                closed_case: "已办结",
+            };
             const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
             this.$http.post("/actual/base/peopleRoomOverview/eventPageList", parm).then(({ data: res }) => {
                 this.shijianList = res.data.list.map((item) => {

src/views/modules/portrayal/jumin/cpts/table/complain.vue

@@ -18,14 +18,16 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
-
+        <eventDetails :showDialog="showDialog" :resiId="rowId" @close="close" />
     </div>
 </template>
   
 <script>
+import sjdetail from "../details/sjdetail";
 export default {
     name: "community",
     components: {
+        sjdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/cpts/table/fuwu.vue

@@ -16,13 +16,16 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
+        <fwdetail :showDialog="showDialog" :id="rowId" @close="close" />
     </div>
 </template>
   
 <script>
+import fwdetail from "../details/fwdetail";
 export default {
     name: "community",
     components: {
+        fwdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/cpts/table/sheng.vue

@@ -16,13 +16,17 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
+        <shengdetail :showDialog="showDialog" :id="rowId" @close="close" />
     </div>
 </template>
   
 <script>
+import shengdetail from "../details/shengdetail";
+
 export default {
     name: "community",
     components: {
+        shengdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/cpts/table/shequ.vue

@@ -16,13 +16,16 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
+        <sqdetail :showDialog="showDialog" :id="rowId" @close="close" />
     </div>
 </template>
   
 <script>
+import sqdetail from "../details/sqdetail";
 export default {
     name: "community",
     components: {
+        sqdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/cpts/table/shijian.vue

@@ -16,13 +16,16 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
+        <sjdetail :showDialog="showDialog" :id="rowId" @close="close" />
+
     </div>
 </template>
   
 <script>
+import sjdetail from "../details/sjdetail";
 export default {
-    name: "community",
     components: {
+        sjdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/cpts/table/xuqiu.vue

@@ -16,13 +16,17 @@
             <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
             <div style="color: #fff">暂无数据</div>
         </div>
+        <xqdetail :showDialog="showDialog" :id="rowId" @close="close" />
     </div>
 </template>
   
 <script>
+import xqdetail from "../details/xqdetail";
+
 export default {
     name: "community",
     components: {
+        xqdetail
     },
     data() {
         return {

src/views/modules/portrayal/jumin/index.vue

@@ -35,7 +35,7 @@
                     </section>
                 </div>
             </div>
-            <div class="right">
+            <div class="right f-endpoint f-flex">
                 <div class="card  f-w50 right16">
                     <div class="title">
                         <div><img src="../../../../assets/images/index/title-icon-xsfw.png" alt="">享受服务次数统计</div>

src/views/modules/satisfaction/communitySelfInsp/index.vue

@@ -217,7 +217,6 @@ export default {
             btnFlag:true
         };
     },
-
     computed: {
         maxTableHeight() {
             const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;