上报事件、统治人群、安全隐患查看弹窗修改

src/components/Dialog/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-pop">
-    <div class="wrap">
+    <div class="wrap" :style="{ width: width + 'px' }">
       <div>
         <div class="title">
           <img src="@/assets/images/shuju/main/card-subtitle-icon.png" />
@@ -28,6 +28,10 @@ export default {
       type: String,
       default: "详情",
     },
+    width: {
+      type: Number,
+      default: 820,
+    },
   },
 
   components: {},
@@ -62,7 +66,7 @@ export default {
     box-sizing: border-box;
     margin: 80px auto 0;
     padding: 24px 16px;
-    width: 820px;
+    // width: 820px;
     background: #00023a;
     box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
     border-radius: 4px;

src/views/dataBoard/organizational/microgrid/components/reportAnEvent.vue

@@ -3,49 +3,73 @@
     <template>
       <div class="eventWrap">
         <el-row :gutter="32">
-          <el-col :span="13">
+          <el-col :span="13" style="padding-left: 40px">
             <div class="leftEvent">
               <div class="eventDetails">事件详情</div>
-              <div>
+              <div class="eventItem">
                 <span>所属组织：</span>
                 <span>海伦路社区</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>上报渠道：</span>
                 <span>12345</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>接受时间：</span>
                 <span>2023-05-15 14:11:32</span>
               </div>
-              <div>
+              <!-- <div class="eventItem">
                 <div>问题描述：</div>
                 <div>空间的规划宽带山东快书嘉豪个客户时刻见风使舵和高科技皇上高考结束后高考结束后给沙发快接电话个空间里都是高科技时代合格的考生嘉豪收到反馈各家各户的沙发空间规划上宽带价格好恐惧的沙发和高科技手段和高科技手段好是空间的规划k</div>
-              </div>
+              </div> -->
-              <div>
+              <div class="eventItem">
                 <span>联系人：</span>
                 <span>王先生</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>联系电话：</span>
                 <span>12323434567</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>详细地址：</span>
                 <span>的经典款亟待解决宽带</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>办结时限：</span>
                 <span>2023-3-45 12:12:12</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>满意度评价：</span>
                 <span>基本满意</span>
               </div>
             </div>
           </el-col>
           <el-col :span="11">
-            <div class="rightEvent"></div>
+            <div class="rightEvent m-info">
+              <div class="eventDetails">办理进展</div>
+              <!-- <el-timeline>
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
+                  {{ activity.content }}
+                </el-timeline-item>
+              </el-timeline> -->
+              <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.reply_time }}</div>
+                  </div>
+                  <div class="content">
+                    <div class="field">回复人：</div>
+                    <div class="value">{{ item.user_show_name }}</div>
+                  </div>
+                  <div class="content">
+                    <div class="field">回复内容：</div>
+                    <div class="value">{{ item.reply_content }}</div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -68,7 +92,25 @@ export default {
   components: { Dialog },
 
   data() {
-    return {};
+    return {
+      activities: [
+        {
+          reply_content: "活动按期开始",
+          reply_time: "2018-04-15",
+          user_show_name: "qqqq",
+        },
+        {
+          reply_content: "活动按期开始",
+          reply_time: "2018-04-15",
+          user_show_name: "qqqq",
+        },
+        {
+          reply_content: "活动按期开始",
+          reply_time: "2018-04-15",
+          user_show_name: "qqqq",
+        },
+      ],
+    };
   },
 
   computed: {},
@@ -83,4 +125,57 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
+<style lang="scss" scoped>
+.eventWrap {
+  height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .eventDetails {
+    font-size: 16px;
+    margin: 24px 0;
+  }
+  .m-info {
+    padding: 0px !important;
+    .timeline {
+      padding: 0px !important;
+      .content {
+        .field {
+          font-size: 14px;
+          text-align: left;
+          opacity: 1;
+          color: #fff;
+        }
+        .value {
+          font-size: 14px;
+        }
+      }
+      .status-box {
+        .timestamp {
+          color: #fff;
+          opacity: 1;
+          font-size: 14px;
+        }
+        .status2 {
+          width: 90px !important;
+          border-radius: 0 !important;
+        }
+      }
+    }
+  }
+  .leftEvent {
+    color: #fff;
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+      span:first-child {
+      }
+      span:last-child {
+      }
+    }
+  }
+  .rightEvent {
+    color: #fff;
+  }
+}
+</style>

src/views/dataBoard/organizational/microgrid/components/safetyhazard.vue

@@ -0,0 +1,160 @@
+<template>
+  <Dialog title="安全隐患" width="1200" @close="handleClose">
+    <template>
+      <div class="saftHard">
+        <div class="saftDetails">
+          <div class="title" style="margin-bottom: 32px">事件详情</div>
+          <div class="content">
+            <el-row :gutter="16" class="columnHeight">
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所名称:</span>
+                  <span>张亮麻辣烫</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>占地面积:</span>
+                  <span>120平米</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所规模:</span>
+                  <span>260人</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>所属组织:</span>
+                  <span>亿联社区第一网格</span>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="16" class="columnHeight">
+              <el-col :span="6">
+                <div class="item">
+                  <span>所属级别:</span>
+                  <span>久小场所</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所类型:</span>
+                  <span>学校</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>负责人:</span>
+                  <span>张三</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>联系电话:</span>
+                  <span>13234343434</span>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="item columnHeight">
+              <span>场所地址：</span>
+              <span></span>
+            </div>
+            <div class="item">
+              <span>备注：</span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+        <div class="saftRecords">
+          <div class="title" style="margin-top: 48px">巡查记录</div>
+          <div class="table">
+            <el-table :data="list" :loading="loading">
+              <el-table-column label="序号" type="index" width="80" />
+              <el-table-column prop="name" label="巡查时间" />
+              <el-table-column prop="address" label="巡查人员" />
+              <el-table-column prop="address" label="联系电话" />
+              <el-table-column prop="address" label="检查结果" />
+              <el-table-column prop="address" label="发现隐患" />
+              <el-table-column prop="address" label="是否回复" />
+              <el-table-column prop="address" label="拟复查时间" />
+              <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                  <el-button type="text">详情</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index.vue";
+
+export default {
+  name: "Safetyhazard",
+  props: {
+    resiId: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: { Dialog },
+
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+.saftHard {
+  height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .title {
+    font-size: 18px !important;
+    padding: 0 !important;
+    color: #fff;
+    margin-bottom: 16px;
+  }
+  .saftDetails {
+    padding: 18px 0 0 22px;
+    .content {
+      .columnHeight {
+        margin-bottom: 32px;
+      }
+      .item {
+        color: #fff;
+        font-size: 16px;
+        span:first-child {
+          display: inline-block;
+          width: 90px;
+        }
+        span:last-child {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .saftRecords {
+    padding: 18px 0 0 22px;
+  }
+}
+</style>

src/views/dataBoard/organizational/microgrid/index.vue

@@ -61,6 +61,9 @@
     <div v-if="showDialogEvent">
       <report-an-event @close="closeEvent" />
     </div>
+    <div v-if="showDialogSaft">
+      <Safetyhazard @close="closeSaft" />
+    </div>
     <Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
   </div>
 </template>
@@ -70,10 +73,10 @@ import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb
 import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
 import SameDialog from "./components/popDetails.vue";
 import ReportAnEvent from "./components/reportAnEvent.vue";
-
+import Safetyhazard from "./components/safetyhazard.vue";
 export default {
   name: "Microgrid",
-  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent },
+  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent, Safetyhazard },
   data() {
     return {
       loading: false,
@@ -115,6 +118,7 @@ export default {
       itemNav: 1,
       showDialog: false,
       showDialogEvent: false,
+      showDialogSaft: false,
       otherTabel: "sbsj",
       monthOptions: new Array(12).fill(0).map((_, index) => {
         return { label: index - 0 + 1 + "月", value: index - 0 + 1 };
@@ -140,6 +144,9 @@ export default {
     closeEvent(flag) {
       this.showDialogEvent = flag;
     },
+    closeSaft(flag) {
+      this.showDialogSaft = flag;
+    },
     getList() {},
     handleView() {
       if (this.itemNav === 1) {
@@ -148,6 +155,9 @@ export default {
       if (this.itemNav === 3) {
         this.showDialog = true;
       }
+      if (this.itemNav === 4) {
+        this.showDialogSaft = true;
+      }
     },
   },
 };