接口直连改造

src/views/eventdetailsdialog.vue

@@ -210,13 +210,12 @@
                     v-show="mapToolCheckItem.includes('资源与操作')"
                     key="ziyuan"
                   >
-                    <!--                    <el-button-->
-                    <!--                      size="small"-->
-                    <!--                      icon="el-icon-s-grid"-->
-                    <!--                      @click="showTVWallDiaLog()"-->
-                    <!--                      v-show="eventType == 1"-->
-                    <!--                    >视频联动</el-button-->
-                    <!--                    >-->
+                                        <el-button
+                                          size="small"
+                                          icon="el-icon-s-grid"
+                                          @click="showTVWallDiaLog()"
+                                          v-show="eventType == 1"
+                                        >视频联动</el-button>
                     <el-button
                       size="small"
                       icon="el-icon-upload"
@@ -4527,6 +4526,214 @@ table tr td input:hover {
     }
   }
 }
+.bgt-info {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  //事件状态
+  //新上报
+  .event-state-sb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-sb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-sb {
+      width: fit-content;
+      background-color: $eventStateColor-sb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //催办
+  .event-state-cb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-cb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-cb {
+      width: fit-content;
+      background-color: $eventStateColor-cb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //签收
+  .event-state-qs {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-qs;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-qs {
+      width: fit-content;
+      background-color: $eventStateColor-qs;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //误报
+  .event-state-wb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-wb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-wb {
+      width: fit-content;
+      background-color: $eventStateColor-wb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //重复
+  .event-state-cf {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-cf;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-cf {
+      width: fit-content;
+      background-color: $eventStateColor-cf;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //办结
+  .event-state-bj {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-bj;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-bj {
+      width: fit-content;
+      background-color: $eventStateColor-bj;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //归档
+  .event-state-gd {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-gd;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-gd {
+      width: fit-content;
+      background-color: $eventStateColor-gd;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+  //确认
+  .event-state-qr {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-qr;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-qr {
+      width: fit-content;
+      background-color: $eventStateColor-qr;
+      color: $white;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
 
+  .bgt-info-name {
+    color: $inBlue;
+    font-weight: bolder;
+    width:240px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+
+  .bgt-info-place {
+    color: $subtitle;
+
+    ul {
+      li {
+        float: left;
+        padding-right: .3rem;
+      }
+    }
+  }
+
+}
 
 </style>

src/views/firespread.vue

@@ -129,6 +129,7 @@
                       size="small"
                       icon="el-icon-s-grid"
                       @click="showTVWallDiaLog()"
+                      v-show="eventType==1"
                     >视频联动</el-button>
                     <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
                   </div>
@@ -3467,6 +3468,214 @@ table tr td input:hover {
     }
   }
 }
+.bgt-info {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  //事件状态
+  //新上报
+  .event-state-sb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-sb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-sb {
+      width: fit-content;
+      background-color: $eventStateColor-sb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //催办
+  .event-state-cb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-cb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-cb {
+      width: fit-content;
+      background-color: $eventStateColor-cb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //签收
+  .event-state-qs {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-qs;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-qs {
+      width: fit-content;
+      background-color: $eventStateColor-qs;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //误报
+  .event-state-wb {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-wb;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-wb {
+      width: fit-content;
+      background-color: $eventStateColor-wb;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //重复
+  .event-state-cf {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-cf;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-cf {
+      width: fit-content;
+      background-color: $eventStateColor-cf;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //办结
+  .event-state-bj {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-bj;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-bj {
+      width: fit-content;
+      background-color: $eventStateColor-bj;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+
+  //归档
+  .event-state-gd {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-gd;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-gd {
+      width: fit-content;
+      background-color: $eventStateColor-gd;
+      color: $white;
+      // padding: .4rem;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
+  //确认
+  .event-state-qr {
+    display: flex;
+    align-items: center;
+
+    i {
+      color: $eventStateColor-qr;
+      font-size: 1rem;
+      margin-left: -.5rem;
+    }
+
+    .event-list-state-qr {
+      width: fit-content;
+      background-color: $eventStateColor-qr;
+      color: $white;
+      padding:0.25rem 0.4rem;
+      margin-left: -.5rem;
+      margin-bottom: .2rem;
+      border-radius: .2rem;
+    }
+  }
 
+  .bgt-info-name {
+    color: $inBlue;
+    font-weight: bolder;
+    width:240px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+
+  .bgt-info-place {
+    color: $subtitle;
+
+    ul {
+      li {
+        float: left;
+        padding-right: .3rem;
+      }
+    }
+  }
+
+}
 
 </style>