11

src/assets/scss/modules/shequzhili/event-info-visiual.scss

@@ -38,12 +38,12 @@
     }
     .g-left {
         box-sizing: border-box;
-        width: 65%;
+        width: 55%;
         padding: 5px 10px;
     }
     .g-right {
         box-sizing: border-box;
-        width: 35%;
+        width: 45%;
         padding: 5px 10px;
     }
 }
@@ -63,10 +63,23 @@
   left: 5px;
 }
 
-.div-btn{
+.div-btn {
-  margin-top:50px;
   display: flex;
   justify-content: center;
+
+  .item_btn {
+    font-size: 14px;
+    padding: 8px 16px;
+    cursor: pointer;
+
+    border: 1px dashed #0c81fe;
+    border-radius: 6px;
+    background-color: #0c81fe;
+  }
+
+  .mgl {
+    margin-left: 20px;
+  }
 }
 .cell-width-1{
   width: 250px
@@ -140,6 +153,7 @@
       margin: 10px 0;
       display: flex;
       padding-left: 15px;
+      color:#fff;
 
       .line{
         text-decoration:underline;
@@ -151,7 +165,7 @@
       .info-title-2 {
         
           flex: 0 0 100px;
-          font-size: 14px;
+          font-size: 16px;
       }
 
       > span,
@@ -231,146 +245,143 @@
 }
 
 .m-process {
-    margin-top: 30px;
+  width: 400px;
-    margin-left: 15px;
+
-    // min-width: 400px;
+  .process-title {
+    margin-bottom: 25px;
+    margin-left: -5px;
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 18px;
+  }
 
-    .process-title {
+  .list {
-        margin-bottom: 25px;
+    position: relative;
-        margin-left: -5px;
+    box-sizing: border-box;
-        font-size: 16px;
+    margin-top: 30px/2;
-        font-family: PingFang SC;
+    margin-left: 50px/2;
-        font-weight: bold;
+    padding: 0 0 0 30px/2;
-        color: #333;
+    width: 680px/2;
-        line-height: 18px;
+    border-left: 3px solid #0c81fe;
+    padding-right: 10px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      display: block;
+      top: -2px/2;
+      left: -2px/2;
+      width: 5px/2;
+      height: 20px/2;
+      background-color: #ffffff;
     }
 
-    .list {
+    .item {
-        position: relative;
+      position: relative;
-        box-sizing: border-box;
+      z-index: 2;
-        margin-top: 30px/2;
+      margin-bottom: 8px;
-        margin-left: 50px/2;
+      padding-bottom: 8px;
-        padding: 0 0 0 30px/2;
+      font-size: 16px;
-        width: 680px/2;
+      font-family: PingFang SC;
-        border-left: 3px solid #0c81fe;
+      font-weight: 400;
-        padding-right: 10px;
+      color: #fefefe;
+      line-height: 24px;
+      padding-left: 20px;
+      padding-top: 1px;
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: -5px;
+        left: -11px;
+        width: 18px;
+        height: 18px;
+        background: #0c81fe;
+        border: 4px solid lighten(#0c81fe, 15);
+        border-radius: 100%;
+      }
 
+      &.z-on {
         &::before {
-            content: "";
+          background: #e08400;
-            position: absolute;
+          border-color: lighten(#e08400, 15);
-            z-index: 1;
-            display: block;
-            top: -2px/2;
-            left: -2px/2;
-            width: 5px/2;
-            height: 20px/2;
-            background-color: #333;
         }
+      }
 
-        .item {
+      &:last-child {
-            position: relative;
+        margin-bottom: 0;
-            z-index: 2;
+        padding-bottom: 0;
-            margin-bottom: 8px;
+        border-bottom: none;
-            padding-bottom: 8px;
+      }
-            font-size: 16px;
+
-            font-family: PingFang SC;
+      .item-row {
-            font-weight: 400;
+        margin-top: -10px;
-            color: #333;
+        margin-bottom: 10px;
-            line-height: 24px;
+        display: flex;
-            padding-left: 20px;
+      }
-            padding-top: 1px;
+
-
+      .name {
-            &::before {
+        position: relative;
-                content: "";
+        padding: 0 10px;
-                display: block;
+        font-size: 12px;
-                position: absolute;
+        font-family: PingFang SC;
-                top: -5px;
+        font-weight: 500;
-                left: -11px;
+        color: #fefefe;
-                width: 18px;
+        line-height: 22px;
-                height: 18px;
+        height: 22px;
-                background: #0c81fe;
+        border-radius: 10px 0 10px 0;
-                border: 4px solid lighten(#0c81fe, 15);
+        background-color: #0c81fe;
-                border-radius: 100%;
+        // background-color: #e08400;
-            }
+      }
-
+
-            &.z-on {
+      .date {
-                &::before {
+        margin-left: 10px;
-                    background: #e08400;
+        font-size: 12px;
-                    border-color: lighten(#e08400, 15);
+        font-family: PingFang SC;
-                }
+        font-weight: 500;
-            }
+        color: #7ca1d2;
-
+        line-height: 25px;
-            &:last-child {
+      }
-                margin-bottom: 0;
+
-                padding-bottom: 0;
+      .detail {
-                border-bottom: none;
+        @include cs;
-            }
+        font-size: 16px;
-
+        line-height: 20px;
-            .item-row {
+        margin-bottom: 5px;
-                margin-top: -10px;
+        display: flex;
-                margin-bottom: 10px;
+
-                display: flex;
+        .detail-field {
-            }
+          width: 22%;
-
+          text-align: justify;
-            .name {
+          text-align-last: justify;
-                position: relative;
+        }
-                padding: 0 10px;
+        .detail-value {
-                font-size: 12px;
+          width: 78%;
-                font-family: PingFang SC;
+          .detail-link {
-                font-weight: 500;
+            display: inline;
-                color: #fff;
+          }
-                line-height: 22px;
+        }
-                height: 22px;
+      }
-                border-radius: 10px 0 10px 0;
+
-                background-color: #0c81fe;
+      .attachement-list {
-                // background-color: #e08400;
+        padding-left: 80px;
-            }
+        a {
-
+          display: block;
-            .date {
+          cursor: pointer;
-                margin-left: 10px;
+          color: #4df0ff;
-                font-size: 12px;
+          font-size: 14px;
-                font-family: PingFang SC;
+
-                font-weight: 500;
+          i {
-                color: #7ca1d2;
+            color: #fff;
-                line-height: 25px;
+          }
-            }
-
-            .detail {
-                @include cs;
-                font-size: 14px;
-                line-height: 20px;
-                margin-bottom: 5px;
-                display: flex;
-
-                .detail-field {
-                    flex:0 0 100px;
-              
-                    text-align: justify;
-                    text-align-last: justify;
-                }
-                .detail-value {
-                    // width: 78%;
-                    .detail-link {
-                        display: inline;
-                    }
-                }
-            }
-
-            .attachement-list {
-                padding-left: 80px;
-                a {
-                    display: block;
-                    cursor: pointer;
-                    color: #4df0ff;
-                    font-size: 14px;
-
-                    i {
-                        color: #333;
-                    }
-                }
-            }
         }
+      }
     }
+  }
 }
 
 .m-top {
@@ -399,3 +410,14 @@
     margin-top:10px
   }
 }
+
+.box-card{
+  padding: 0px;
+  border: 0px solid #EBEEF5;
+  background-color:transparent;
+  -webkit-box-shadow:none;
+  box-shadow:none
+  
+}
+
+

src/views/modules/shequzhili/event/cpts/event-detail.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="">
-    <el-card v-if="showType==''">
+    <el-card class="box-card"
-      <h3>事件详情</h3>
+             v-if="showType==''">
+      <h3 v-if="source==='manage'">事件详情</h3>
       <div class="m-row">
         <div class="m-info">
           <div class="info-prop">
@@ -89,18 +90,19 @@
 2、状态=未完成 （有操作id） -->
       <div v-if="(info.status==='processing'&&info.operationId)||(info.status==='closed_case'&&(info.satisfactionName||(!info.satisfactionName && user.id!=info.createdUserId)))"
            class="div-btn ">
-        <el-button size="small"
+        <el-button v-if="source==='manage'"
+                   size="small"
                    @click="handleCloseEvent">关闭</el-button>
+        <div v-else
+             class="item_btn"
+             @click="handleCloseEvent()">关闭</div>
 
       </div>
-      <!-- <div class="div-btn ">
-        <el-button size="small"
-                   @click="handleCloseEvent">关闭</el-button>
 
-      </div> -->
     </el-card>
 
-    <el-card v-if="info.status==='closed_case'&&!info.satisfactionName && user.id===info.createdUserId">
+    <el-card class="box-card"
+             v-if="info.status==='closed_case'&&!info.satisfactionName && user.id===info.createdUserId">
       <h3>满意度评价</h3>
       <div class="m-row">
         <div class="m-info">
@@ -125,15 +127,25 @@
         </div>
 
       </div>
-      <div class="div-btn ">
 
+      <div v-if="source==='manage'"
+           class="div-btn ">
         <el-button size="small"
                    @click="handleCloseEvent">关闭</el-button>
-        <el-button size="small"
+        <el-button style="margin-left:20px"
                    type="primary"
+                   size="small"
                    @click="handleComfirmSatisfy">确定</el-button>
-
       </div>
+      <div v-else
+           class="div-btn">
+        <div class="item_btn"
+             @click="handleCloseEvent()">关闭</div>
+        <div class="item_btn mgl"
+             v-if="info.status==='pending'"
+             @click="handleComfirmSatisfy()">确认</div>
+      </div>
+
     </el-card>
     <el-dialog :visible.sync="showSatisfy"
                :close-on-click-modal="false"
@@ -144,7 +156,8 @@
                class="dialog-h"
                @closed="showSatisfy=false">
 
-      <div class="div-btn">
+      <div v-if="source==='manage'"
+           class="div-btn ">
         <el-button size="small"
                    @click="showSatisfy=false">关闭</el-button>
         <el-button style="margin-left:20px"
@@ -152,6 +165,15 @@
                    size="small"
                    @click="handleComfirmSatisfy">确定</el-button>
       </div>
+      <div v-else
+           class="div-btn">
+        <div class="item_btn"
+             @click="showSatisfy=false">关闭</div>
+        <div class="item_btn mgl"
+             v-if="info.status==='pending'"
+             @click="handleComfirmSatisfy()">确认</div>
+      </div>
+
     </el-dialog>
 
   </div>
@@ -222,6 +244,10 @@ export default {
         return {}
       }
     },
+    source: {//展示来源：manage  管理平台    visiual  可视化平台
+      type: String,
+      default: 'visiual'
+    }
   },
 
   components: {
@@ -234,6 +260,15 @@ export default {
 
   watch: {
 
+  },
+  created () {
+
+    if (this.source === 'visiual') {
+      require("@/assets/scss/modules/shequzhili/event-info-visiual.scss")
+    } else {
+      require("@/assets/scss/modules/shequzhili/event-info.scss")
+    }
+
   },
 
   mounted () {
@@ -346,9 +381,6 @@ export default {
   },
 };
 </script>
+<style scoped>
+</style>
 
-<style
-  lang="scss"
-  src="@/assets/scss/modules/shequzhili/event-info.scss"
-  scoped
-></style>

src/views/modules/shequzhili/event/cpts/event-info.vue

@@ -19,7 +19,8 @@
                         :demandUserMobile="demandUserMobile"
                         :gridId="gridId"></process-form>
 
-          <div class="div-btn ">
+          <div v-if="source==='manage'"
+               class="div-btn ">
             <el-button size="small"
                        @click="handleClose">关闭</el-button>
             <el-button style="margin-left:20px"
@@ -27,6 +28,14 @@
                        size="small"
                        @click="handleComfirm">确定</el-button>
           </div>
+          <div v-else
+               class="div-btn">
+            <div class="item_btn"
+                 @click="handleClose()">关闭</div>
+            <div class="item_btn mgl"
+                 v-if="info.status==='pending'"
+                 @click="handleSubmit()">确认</div>
+          </div>
         </el-card>
       </div>
     </div>
@@ -39,6 +48,7 @@
                       :type="pageType"
                       :eventId="eventId"
                       :eventDetailData="eventDetailData"
+                      :source="source"
                       @handleToProject="handleToProject"
                       @handleToDemand="handleToDemand"
                       @handleClose="handleClose"></event-detail>
@@ -51,7 +61,8 @@
                           :eventId="eventId"
                           :eventDetailData="eventDetailData"></process-form>
 
-            <div class="div-btn ">
+            <div v-if="source==='manage'"
+                 class="div-btn ">
               <el-button size="small"
                          @click="handleClose">关闭</el-button>
               <el-button style="margin-left:20px"
@@ -59,16 +70,26 @@
                          size="small"
                          @click="handleComfirm">确定</el-button>
             </div>
+            <div v-else
+                 class="div-btn">
+              <div class="item_btn"
+                   @click="handleClose()">关闭</div>
+              <div class="item_btn mgl"
+                   v-if="info.status==='pending'"
+                   @click="handleSubmit()">确认</div>
+            </div>
+
           </el-card>
         </div>
       </div>
 
       <div v-if="projectProcess.length>0"
            class="g-right">
-        <el-card class="m-card"
+        <el-card class="box-card"
                  style="max-height: 90vh; overflow: auto">
-          <h3>事件处理进展</h3>
+
           <div class="m-process">
+            <div class="process-title">处理进展</div>
             <div class="list">
               <div class="item"
                    :class="index === 0 ? 'z-on' : ''"
@@ -289,6 +310,7 @@ export default {
     },
   },
   created () {
+
     if (this.source === 'visiual') {
       require("@/assets/scss/modules/shequzhili/event-info-visiual.scss")
     } else {