居民概览事件详情

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="title" :class="noBg ? 'no-bg' : ''">
+    <span class="text">
+      <span class="txt">{{ text }}</span>
+      <span class="text-shadow">{{ text }}</span>
+    </span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Title",
+  props: {
+    text: {
+      type: String,
+      default: "",
+    },
+    noBg: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  background: url("@/assets/images/manyidu/title-bg.png") no-repeat 0 0 fixed;
+  background-size: 218px 40px;
+  padding: 8px 16px 8px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .text {
+    position: relative;
+    font-size: 22px;
+    font-family: HYShuYuanHeiJ;
+    font-weight: 400;
+
+    .txt {
+      color: #1f79ff;
+      background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      z-index: 2;
+    }
+
+    .text-shadow {
+      top: 4px;
+      left: 3px;
+      position: absolute;
+      color: #020f21;
+      white-space: nowrap;
+    }
+  }
+}
+.no-bg {
+  background: none;
+}
+</style>

src/views/dataBoard/cpts/event-details.vue

@@ -0,0 +1,370 @@
+<template>
+  <el-dialog
+    width="1118px"
+    :modal="true"
+    :modal-append-to-body="false"
+    :destroy-on-close="true"
+    :visible="showDialog"
+    @close="handleClose"
+  >
+    <div class="eventWrap">
+      <el-row :gutter="32">
+        <el-col :span="24" style="padding-left: 40px">
+          <title-box text="事件详情" />
+        </el-col>
+        <el-col
+          :span="13"
+          style="padding-left: 40px"
+          v-loading="loading"
+          element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0"
+        >
+          <div class="leftEvent">
+            <div class="eventDetails">
+              <img
+                :width="18"
+                :height="18"
+                src="@/assets/images/manyidu/tc-title-icon.png"
+              />事项详情
+            </div>
+            <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.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"
+          v-loading="loading1"
+          element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0.3)"
+        >
+          <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">
+                            {{ formTimeLimit(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>
+import titleBox from "./Title";
+export default {
+  name: "ReportAnEvent",
+  components: {
+    titleBox,
+  },
+  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);
+        }
+      },
+      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" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+/deep/ .el-dialog {
+  background: url(~@/assets/images/manyidu/dialog-bg.png);
+  background-size: 100% 100%;
+  width: 1118px;
+  height: 822px;
+}
+/deep/ .el-dialog__body {
+  padding: 0 20px 30px;
+}
+/deep/ .el-dialog__header {
+  border: 0 !important;
+}
+/deep/ .el-dialog__headerbtn {
+  top: 24px;
+  right: 32px;
+  .el-dialog__close {
+    color: #ffffff;
+    font-weight: 600;
+  }
+}
+@mixin fontStyle {
+  color: #fff !important;
+  font-size: 14px !important;
+}
+.eventWrap {
+  width: 1094px;
+  height: 798px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+  .eventDetails {
+    font-size: 18px;
+    margin: 48px 24px 48px 0;
+    color: #ffffff;
+    img {
+      margin-top: -4px;
+      margin-right: 8px;
+    }
+  }
+  .m-info {
+    padding: 0px !important;
+    .m-process {
+      margin: 0 !important;
+      .name {
+        @include fontStyle;
+      }
+      .date {
+        @include fontStyle;
+      }
+      .detail {
+        @include fontStyle;
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+  .leftEvent {
+    color: #fff;
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+      span:first-child {
+      }
+      span:last-child {
+      }
+    }
+  }
+  .rightEvent {
+    color: #fff;
+  }
+}
+</style>

src/views/dataBoard/cpts/personnel/modules/businessTables/complaint.vue

@@ -13,6 +13,11 @@
         </template>
       </el-table-column>
     </el-table>
+    <eventDetails
+      :showDialog="showDialog"
+      :id="this.rowId"
+      @close="close"
+    />
     <Pagination
       v-show="total > 0"
       :total="total"
@@ -24,8 +29,12 @@
 </template>
 
 <script>
+import eventDetails from "../../../event-details.vue";
 export default {
   name: "complaint",
+  components: {
+    eventDetails,
+  },
   data() {
     return {
       queryParams: {
@@ -35,6 +44,8 @@ export default {
         residList: [],
       },
       list: [],
+      rowId: null,
+      showDialog: false,
       total: 0,
     };
   },
@@ -45,6 +56,13 @@ export default {
     this.getList();
   },
   methods: {
+    handleView(row) {
+      this.rowId = row.id;
+      this.showDialog = true;
+    },
+    close() {
+      this.showDialog = false;
+    },
     getList() {
       // 事件分页查询
       const statusArr = {
@@ -58,7 +76,7 @@ export default {
           this.list = res.data.list.map((item) => {
             return {
               ...item,
-              status: item.status?statusArr[item.status]:null,
+              status: item.status ? statusArr[item.status] : null,
               marktype: marktypes[item.marktype],
             };
           });

src/views/dataBoard/cpts/personnel/modules/businessTables/reporting-events.vue

@@ -19,12 +19,17 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <eventDetails :showDialog="showDialog" :id="this.rowId" @close="close" />
   </div>
 </template>
 
 <script>
+import eventDetails from "../../../event-details.vue";
 export default {
   name: "reporting-events",
+  components: {
+    eventDetails,
+  },
   data() {
     return {
       queryParams: {
@@ -34,6 +39,8 @@ export default {
       },
       list: [],
       total: 0,
+      rowId: null,
+      showDialog: false,
     };
   },
   created() {},
@@ -43,6 +50,13 @@ export default {
     this.getList();
   },
   methods: {
+    handleView(row) {
+      this.rowId = row.id;
+      this.showDialog = true;
+    },
+    close() {
+      this.showDialog = false;
+    },
     getList() {
       // 事件分页查询
       const statusArr = {
@@ -56,7 +70,7 @@ export default {
           this.list = res.data.list.map((item) => {
             return {
               ...item,
-              status: item.status?statusArr[item.status]:null,
+              status: item.status ? statusArr[item.status] : null,
               marktype: marktypes[item.marktype],
             };
           });

src/views/dataBoard/renfang/index.vue

@@ -549,7 +549,7 @@ export default {
 	},
     toResiClassPage(pageType, type_id = "", type_name) {
       this.$router.push({
-        path: "/dataBoard/renfang/resi-class",
+        path: "/dataBoard/renfang/resi-class-new",
         query: {
           org_id: this.orgId,
           type_id,