1231

src/assets/css/homeScreen.scss

@@ -333,6 +333,7 @@
 .dialogBox {
   padding: 0 0 10px 0;
   box-sizing: border-box;
+  background: url('~@/assets/images/dialog-bg.png') no-repeat center center;
   background-size: 100% 100%;
   z-index: 999;
   border-radius: 4px;

src/views/home/layout/streetInfo.vue

@@ -1,96 +1,65 @@
 <template>
-  <div
+  <div class="dialogBox" :style="`left:${elLeft}px;top:${elTop}px`" draggable="true" ref="dialogBoxYpfx"
-    class="dialogBox"
+    @dragstart="dragstart($event)" @dragend="dragend($event)">
-    :style="`left:${elLeft}px;top:${elTop}px`"
-    draggable="true"
-    ref="dialogBoxYpfx"
-    @dragstart="dragstart($event)"
-    @dragend="dragend($event)"
-  >
     <div class="title">
-      <span class="mc">{{ props.data.jzMc ? props.data.jzMc : props.data.fzrXm + "巡组" }}</span>
+      <span class="mc">{{ props.data.cph }}</span>
       <span @click="close" class="close">
-        <el-icon><Close /></el-icon>
+        <el-icon>
+          <Close />
+        </el-icon>
       </span>
     </div>
     <div class="info-Big-Box noScollLine">
-      <div class="infoBox">
+      <div class="card">
-        <div class="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
+
-          {{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
+        <div class="card-cnt">
+          <div class="leftImg">
+            <el-image style="width: 100%" :src="props.data.image" :hide-on-click-modal="true" close-on-press-escape
+              fit="cover" lazy>
+            </el-image>
           </div>
-        <div class="text">
+          <div class="rightInfo">
-          负责人：<span class="tag mj">民警</span>
+            <div>
-          <el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh  " placement="bottom">
+              <span class="zjhm">驾驶员：</span>{{ props.data.cljsy }}
-            <span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
-          </el-tooltip>
             </div>
-        <div class="text">
+            <div>
-          开始时间：<span class="name">{{ props.data.bbkssj }}</span>
+              <span class="zjhm">车牌号：</span>{{ props.data.cph }}
             </div>
-        <div class="time">
+            <div>
-          (计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
+              <span class="zjhm">行驶路线：</span>{{ props.data.xlmc }}
             </div>
-        <div class="text">
+            <div>
-          组员：
+              <span class="zjhm">乘车人数：</span>{{ props.data.ccrs ? props.data.ccrs : 0 }}
-          <span v-for="(item, index) in props.data.pbmj" :key="index" class="jc_box">
-            <span class="tag mj">民警</span>
-            <span class="name">{{ item.jlxm }}</span>
-          </span>
-          <span v-for="(item, index) in props.data.pbfj" :key="index" class="jc_box">
-            <span class="tag fj">辅警</span>
-            <span class="name">{{ item.jlxm }}</span>
-          </span>
             </div>
-        <div class="text">
+            <div>
-          单位：<span class="name">{{ props.data.ssbm }}</span>
+              <span class="zjhm">重点人员：</span>{{ props.data.zdrs ? props.data.zdrs : 0 }}
+            </div>
+            <div>
+              <span class="zjhm">途中乘车人数：</span>{{ props.data.ztscrs ? props.data.ztscrs : 0 }}
+            </div>
+          </div>
+        </div>
+        <div class="address">
+          <img class="addImg" src="@/assets/images/dingwei.png" />
+          <span>{{ props.data.xlmc }}</span>
         </div>
-        <div class="text zblist" v-if="props.data.txzb.length <= 0">
-          通讯装备：<span>暂无数据</span>
       </div>
 
-        <div class="text zblist" v-else>
+
-          <el-collapse v-model="props.data.openTxzb">
-            <el-collapse-item title="通讯装备：" name="1">
-              <span class="zb-item" v-for="(item, index) in props.data.txzb" :key="index">
-                <span class="sbinfo">{{ item.sbmc }}</span>
-                <el-tooltip :content="'呼叫(' + item.hh + ')'" placement="bottom">
-                  <img style="width: 22px"  @click="getZFJLY(item)"/>
-                </el-tooltip>
-              </span>
-            </el-collapse-item>
-          </el-collapse>
     </div>
 
-        <div class="text zblist" v-if="props.data.jyqx.length <= 0">
+    <!-- 视频播放区域 -->
-          常用装备：<span>暂无数据</span>
+    <div v-if="showVideo" class="video-container">
+      <video ref="videoPlayer" class="video-player" controls autoplay muted :src="videoSrc">
+        您的浏览器不支持视频播放
+      </video>
     </div>
 
-        <div class="text zblist" v-else>
-          <el-collapse v-model="props.data.openJyqx">
-            <el-collapse-item title="常用装备：" name="1">
-              <span class="zb-item" v-for="(item, index) in props.data.jyqx" :key="index">
-                <span class="qxinfo">{{ item.qxmc }}（{{ item.qxsl }}）个</span>
-              </span>
-            </el-collapse-item>
-          </el-collapse>
-        </div>
-        <div class="text zblist">
-          警用车辆：
-          <span class="zb-item" v-for="(item, index) in props.data.pbcl" :key="index">
-            <span class="qxinfo">{{ item.jdchphm }}</span>
-          </span>
-          <span v-if="props.data.pbcl.length <= 0">暂无</span>
-        </div>
-        <div class="text" v-if="props.data.bz != ''">
-          备注： <span class="name">{{ props.data.bz }}</span>
-        </div>
-      </div>
-    </div>
     <el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
       <template #reference>
         <div class="btnBox">
-            <button class="dp-default small" @click="onClickZbyj">周边预警</button>
+          <button class="dp-default small" @click="onClickclgj">车辆轨迹</button>
-            <button class="dp-default small" @click="onClickSpsd">视频随动</button>
+          <button class="dp-default small" @click="onClickSpsd">{{showVideo.value?"关闭视频":"视频播放"}}</button>
         </div>
       </template>
     </el-popover>
@@ -115,6 +84,9 @@ const props = defineProps({
 });
 const visible = ref(false);
 const dialogBoxYpfx = ref();
+const videoPlayer = ref();
+const showVideo = ref(false);
+const videoSrc = ref('');
 const initWidth = ref(0); //父元素宽度
 const initHeight = ref(0); //父元素高度
 const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
@@ -124,6 +96,7 @@ const elTop = ref(120); //元素右偏移量
 watch(
   () => props.data,
   (val) => {
+    console.log(val, 'val');
     visible.value = false;
   }, {
   immediate: true,
@@ -133,8 +106,32 @@ watch(
 onMounted(() => {
   initBodySize();
 });
+const onClickSpsd = () => {
+  if (showVideo.value) {
+    videoPlayer.value.pause();
+    videoPlayer.value.currentTime = 0;
+  } else {
+    videoSrc.value = props.data.videoUrl || '/static/sample.mp4';
+  }
+  showVideo.value = !showVideo.value
+};
 
 
+const onClickclgj = () => {
+  let row = props.data.zb
+  if (row && row.length > 0) {
+    emitter.emit("setMapCenter", {
+      location: [row[0][0], row[0][1]],
+      zoomLevel: 12
+    });
+    emitter.emit("drawLineAnimation", {
+      type: "solid",
+      coords: row,
+      isclear: true,
+      flag: "lx"
+    });
+  }
+}
 //初始化
 const initBodySize = () => {
   initWidth.value = dialogBoxYpfx.value.clientWidth;
@@ -156,6 +153,8 @@ const dragend = (e) => {
 //关闭弹窗
 function close() {
   visible.value = false;
+  emitter.emit("showJzInfo", false);
+  emitter.emit("deletePointArea", "lx");
 }
 
 
@@ -163,17 +162,35 @@ function close() {
 
 <style lang="scss" scoped>
 @import "@/assets/css/homeScreen.scss";
+
 .dialogBox {
   position: absolute;
   padding: 0;
   width: 484px !important;
+
+  .video-container {
+    margin: 10px auto;
+    border-radius: 4px;
+    overflow: hidden;
+    text-align: center; // 容器居中对齐
+    .video-player {
+      width: 100%;
+      max-width: 400px; // 设置最大宽度
+      height: 200px;
+      display: block;
+      margin: 0 auto; // 水平居中
+    }
+  }
+
   .title {
     border-bottom: 1px solid #275288;
     margin-bottom: 6px;
+
     .mc {
       margin-left: 10px;
     }
   }
+
   .info-Big-Box {
     max-height: 70vh;
     overflow: hidden;
@@ -181,57 +198,129 @@ function close() {
     padding: 4px 10px;
     box-sizing: border-box;
   }
-  .infoBox {
+
-    position: relative;
+  .card {
-    padding: 10px !important;
+    padding: 10px 10px 4px 10px;
-    .text {
+    box-sizing: border-box;
-      color: #00bfff;
+    border-top: 2px solid #00bfff;
-      line-height: 26px;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+
+    .card-cnt {
+      display: flex;
+      background: rgba(255, 255, 255, 0.05);
+      margin-bottom: 4px;
+
+      .leftImg {
+        width: 180px;
+        margin-right: 10px;
       }
-    .tag {
+
-      margin: 0 4px;
+      .rightInfo {
+        flex: 1;
+
+        .title {
+          width: 100%;
+          color: #0095FF;
+          line-height: 28px;
+          margin-right: 20px;
         }
-    .name {
+
+        .status {
+          padding: 1px 6px;
+          border-radius: 4px;
+          background: #FF3A3A;
           color: #fff;
         }
-    .time {
+
-      color: #3ad2d4;
+        .zjhm {
-    }
+          line-height: 27px;
-    .jc_box {
+          color: #7CBFFF;
-      margin: 0 4px;
-    }
-    .zblist {
-      display: flex;
-      flex-wrap: wrap;
-      .zb-item {
           margin-right: 10px;
-        .sbinfo {
+          font-size: 16px;
+        }
+
+        .textflex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .text {
+          font-size: 12px;
+          color: #6585af;
+
+          .info {
+            color: #fff;
+          }
+        }
+
+        .newinfo {
           color: yellow;
         }
+      }
+    }
+
+    .address {
+      justify-content: space-between;
+      margin-top: 4px;
+      padding-top: 6px;
+      box-sizing: border-box;
+      border-top: 1px solid #3b3737;
+      color: #fff;
+
+      .addImg {
+        margin-right: 4px;
+        vertical-align: text-top;
+      }
+    }
+
+    .phtos {
+      height: 110px;
+      padding-top: 10px;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      border-top: 1px dashed #3d3d3d;
+      margin-top: 6px;
+      box-sizing: border-box;
+
+      ::v-deep .el-carousel {
+        width: 100%;
+        height: 100%;
+
+        .el-carousel__container {
+          height: 72%;
+        }
+
+        .el-carousel__item {
+          height: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+
       img {
-          margin-left: 4px;
+        width: 60px;
-          cursor: pointer;
+        height: 70px;
-        }
-        .qxinfo {
-          color: rgb(127, 177, 217);
-          padding: 2px 4px;
-          border: 1px solid rgb(61, 116, 219);
-          border-radius: 4px;
-          display: inline;
-          white-space: nowrap;
-        }
       }
     }
   }
 }
+
 .all-dialog .dialogBox>.btnBox {
   padding-top: 0;
   padding-bottom: 0;
 }
+
 .timeBox {
   width: 100%;
   display: flex;
   align-items: center;
+
   .time1 {
     margin: 0 10px;
     text-align: center;
@@ -245,18 +334,21 @@ function close() {
   --el-collapse-header-bg-color: transparent;
   --el-collapse-border-color: transparent;
 }
+
 ::v-deep .el-collapse-item__header {
   color: #00bfff;
 }
+
 ::v-deep .el-collapse-item__wrap {
   background-color: transparent;
 }
+
 ::v-deep .el-collapse-item__content {
   color: #fff;
   padding-bottom: 0;
 }
+
 .null {
   text-align: center;
 }
-
 </style>