syy

src/views/SenEventCenter.vue

@@ -378,7 +378,7 @@
             border: 1px solid #1e6a78;
             width: 250px;
             height: 300px;
-            padding: 25px;
+            padding: 25px 20px;
             i{
                 display: block;
                 width: 50px;
@@ -390,6 +390,8 @@
                 img{
                     margin: 12px auto!important;
                     display: inline-block;
+					width: 23px;
+					height: 24px;
                 }
             }
 			h4{
@@ -419,6 +421,8 @@
 				text-align: center;
 				img{
 					margin: 14px auto!important;
+					width: 32px;
+					height: 33px;
 				}
 			}
 		}

src/views/SentryPage.vue

@@ -89,21 +89,7 @@
 <!--            </div>-->
 <!--            <textarea v-model="reviewDescription"> </textarea>-->
 <!--            <button @click="addEventLogDescription(eventDetails)">发送</button>-->
-            <button  @click="eventSignature(eventDetails)">签收</button>
-            <button  @click="configDept(eventDetails)">联动</button>
-            <button  @click="eventCompletion(eventDetails)">办结</button>
-            <button  @click="eventReview(eventDetails)">审核</button>
-            <button  @click="eventArchiving(eventDetails)">归档</button>
-            <el-tree class="tree-border tree_scroll" style="height: 20vh; overflow-y:scroll" :data="deptOptionsLiandong"
-                     show-checkbox ref="LiandongDept" node-key="id" :check-strictly="true"
-                     :accordion="true" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
-            <div >
-              <el-radio-group v-model="reviewStatus" v-for="(item,idx) in reviewStatusList">
-                <el-radio :label="item.value" :name="item.value">{{ item.name }}</el-radio>
-              </el-radio-group>
-            </div>
-            <textarea v-model="reviewDescription"> </textarea>
-            <button @click="addEventLogDescription(eventDetails)">发送</button>
+
           </div>
         </div>
         <!--弹框 开始-->
@@ -117,59 +103,60 @@
             <div class="sjlc_div" :class="eventDetails.eventStatus=='event_report'?'date_div':''">
               <i><img src="../assets/images/sentinel/sb_icon2.png" /></i>
               <h4>事件上报</h4>
-              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_report'?'tab-data-tabs':''" border="2">
-                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
-                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
-                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
-                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_report'?'tab-data-tabs':''" border="0">
+                <tr><td class="tab-left">事件名称：</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间：</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备：</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型：</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
               </table>
             </div>
             <u :class="eventDetails.eventStatus=='event_confirmation'?'date':''"></u>
             <div class="sjlc_div" :class="eventDetails.eventStatus=='event_confirmation'?'date_div':''">
               <i><img src="../assets/images/sentinel/sb_icon3.png" /></i>
               <h4>事件确认</h4>
-              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_confirmation'?'tab-data-tabs':''" border="2">
-                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
-                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
-                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
-                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_confirmation'?'tab-data-tabs':''" border="0">
+                <tr><td class="tab-left">事件名称：</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间：</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备：</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型：</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
               </table>
             </div>
             <u :class="eventDetails.eventStatus=='event_signature'?'date':''"></u>
             <div class="sjlc_div" :class="eventDetails.eventStatus=='event_signature'?'date_div':''">
               <i><img src="../assets/images/sentinel/sb_icon4.png" /></i>
               <h4>事件签收</h4>
-              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_signature'?'tab-data-tabs':''" border="2">
-                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
-                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
-                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
-                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_signature'?'tab-data-tabs':''" border="0">
+                <tr><td class="tab-left">事件名称：</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间：</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备：</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型：</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
               </table>
             </div>
             <u :class="eventDetails.eventStatus=='event_completion'?'date':''"></u>
             <div class="sjlc_div" :class="eventDetails.eventStatus=='event_completion'?'date_div':''">
               <i><img src="../assets/images/sentinel/sb_icon5.png" /></i>
               <h4>事件办结</h4>
-              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_completion'?'tab-data-tabs':''" border="2">
-                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
-                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
-                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
-                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_completion'?'tab-data-tabs':''" border="0">
+                <tr><td class="tab-left">事件名称：</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间：</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备：</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型：</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
               </table>
             </div>
             <u :class="eventDetails.eventStatus=='event_archiving'||eventDetails.eventStatus=='event_review'?'date':''"></u>
             <div class="sjlc_div" :class="eventDetails.eventStatus=='event_archiving'||eventDetails.eventStatus=='event_review'?'date_div':''">
               <i><img src="../assets/images/sentinel/sb_icon6.png" /></i>
               <h4>已经归档</h4>
-              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_archiving'?'tab-data-tabs':''" border="2">
-                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
-                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
-                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
-                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_archiving'?'tab-data-tabs':''" border="0">
+                <tr><td class="tab-left">事件名称：</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间：</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备：</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型：</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
               </table>
             </div>
           </div>
-          <div class="block">
+          <div class="block le_ri">
+            <el-scrollbar style="height: 480px;" class="spsb_time">
             <el-timeline>
               <el-timeline-item
                 v-for="(activity, index) in activities"
@@ -183,6 +170,26 @@
                 </el-card>
               </el-timeline-item>
             </el-timeline>
+            </el-scrollbar>
+            <div class="spsb_xx">
+              <div class="spsb_xx_btn">
+                <el-button type="primary"  @click="eventSignature(eventDetails)">签收</el-button>
+                  <el-button type="primary"  @click="configDept(eventDetails)">联动</el-button>
+                    <el-button type="primary"  @click="eventCompletion(eventDetails)">办结</el-button>
+                      <el-button type="primary"  @click="eventReview(eventDetails)">审核</el-button>
+                        <el-button type="primary"  @click="eventArchiving(eventDetails)">归档</el-button>
+                <el-tree class="tree-border tree_scroll" style="height: 31vh; overflow-y:scroll" :data="deptOptionsLiandong"
+                         show-checkbox ref="LiandongDept" node-key="id" :check-strictly="true"
+                         :accordion="true" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
+                <div  class="spsb_rad">
+                  <el-radio-group v-model="reviewStatus" v-for="(item,idx) in reviewStatusList">
+                    <el-radio :label="item.value" :name="item.value">{{ item.name }}</el-radio>
+                  </el-radio-group>
+                </div>
+                <textarea class="spsb_text" v-model="reviewDescription"> </textarea>
+                <button class="spsb_fs_btn" @click="addEventLogDescription(eventDetails)">发送</button>
+              </div>
+            </div>
           </div>
         </el-dialog>
       </div>
@@ -1082,23 +1089,150 @@
   .tab-tabs{
     color: #ffffff;
     border-collapse: collapse; /* 合并边框 */
-    border: 2px solid #ffffff; /* 设置边框样式 */
+    border:0px; /* 设置边框样式 */
   }
   .tab-data-tabs{
-    color: #2c1de9;
+    color: #fff;
     border-collapse: collapse; /* 合并边框 */
-    border: 2px solid #ffffff; /* 设置边框样式 */
+    border: 0px; /* 设置边框样式 */
   }
   .tab-left{
-    width: 65px;
+    width: 80px;
+    vertical-align: top;
+    padding-bottom: 8px !important;
   }
   .tab-right{
-    width: 155px;
+    width: 160px;
+    padding-bottom: 8px !important;
   }
   .timeline-span{
     color: #fff;
     font-size: 16px;
   }
+  .le_ri{
+    margin-top: 20px!important;
+  }
+    .el-timeline {
+      padding-left: 8px !important;
+    }
+    .el-timeline-item__node--normal {
+      left: 0px;
+      width: 10px;
+      height: 10px;
+    }
+    .el-timeline-item__node {
+      background-color: #1fe3d2;
+      box-shadow: 0px 0px 5px #1fe3d2;
+    }
+
+    .ant-timeline-item-head-custom {
+      background: none; /* 移除自定义图标背景 */
+    }
+
+    .el-timeline-item__tail {
+      position: absolute;
+      left: 4px;
+      height: 100%;
+      border-left: 1px solid #1e6a78;
+    }
+    .timeline-span {
+      color: #fff;
+      margin-bottom: 9px !important;
+      text-shadow: 0px 0px 5px rgba(31, 227, 210, 0.38);
+      font-weight: 900;
+      display: block;
+      margin-top: -11px !important;
+    }
+    .el-card {
+      border: 1px solid #1e6a78;
+      background-color: #00706b61;
+      color: #fff;
+      line-height: 25px;
+    }
+    .el-timeline-item {
+      padding-bottom: 20px !important;
+    }
+  .le_ri{
+    display: flex!important;
+    flex-direction: row!important;
+    justify-content: space-between;
+  }
+  .spsb_time{
+    width:70%;
+  }
+  .spsb_xx{
+    width: 28%;
+  }
+    .el-button--primary {
+      color: #FFF;
+      background-color: #144041;
+      border-color: #1e6a78;
+    }
+     .el-button {
+       width: 60px;
+       height: 30px;
+       margin-bottom: 10px!important;
+     }
+    .tree-border {
+      border: 1px solid #1e6a78;
+      background: rgba(20, 64, 65, 0.57);
+      margin-bottom: 10px!important;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: #0b7869;
+      border-color: #0c997f;
+    }
+    .el-tree-node__content:hover,.is-current {
+      background-color: #0a46439c!important;
+    }
+  .spsb_rad{
+    /*text-align: right;*/
+  }
+    .el-radio__input.is-checked .el-radio__inner {
+      border-color: #06bfa5;
+      background: #066864;
+    }
+    .el-radio__input.is-checked+.el-radio__label {
+      color: #ffffff;
+    }
+    .el-radio {
+      color: #ffffff;
+    }
+    .el-radio__inner{
+      border-color: #06bfa5;
+      background: #066864;
+    }
+    .el-button--primary:focus, .el-button--primary:hover {
+      background: #09857f;
+      border-color: #09b7a7;
+    }
+  .spsb_text{
+    width: 100%;
+    height: 60px;
+    margin: 10px 0px!important;
+    padding: 5px;
+    border-color: #1e6a78;
+    background: #06686438;
+    border-radius: 4px;
+    outline: 0px;
+    color: #fff;
+    line-height: 25px;
+  }
+  .spsb_fs_btn{
+      background: #00706d;
+      color: #fff;
+      display: inline-block;
+      width: 80px;
+      height: 34px;
+      border: 1px solid #1e6a78;
+      border-radius: 4px;
+      float: right;
+    cursor: pointer;
+  }
+    .el-checkbox__inner ,.el-checkbox__input.is-disabled .el-checkbox__inner{
+      border: 1px solid #078d86;
+      background-color: #056759a6;
+    }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';