From 4573b25182305a6d222fd40d4af72498c79d712e Mon Sep 17 00:00:00 2001
From: Esacpe <1113279529@qq.com>
Date: Wed, 23 Jul 2025 19:15:31 +0800
Subject: [PATCH] 1231

---
 src/assets/css/homeScreen.scss       |   1 +
 src/assets/images/dialog-bg.png      | Bin 0 -> 5927 bytes
 src/assets/images/dingwei.png        | Bin 0 -> 595 bytes
 src/views/home/layout/streetInfo.vue | 360 +++++++++++++++++----------
 4 files changed, 227 insertions(+), 134 deletions(-)
 create mode 100644 src/assets/images/dialog-bg.png
 create mode 100644 src/assets/images/dingwei.png

diff --git a/src/assets/css/homeScreen.scss b/src/assets/css/homeScreen.scss
index e8620e2..2e32714 100644
--- a/src/assets/css/homeScreen.scss
+++ b/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;
diff --git a/src/assets/images/dialog-bg.png b/src/assets/images/dialog-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5c918a6be847fe53c5207978845bf4b67b232fe
GIT binary patch
literal 5927
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/dingwei.png b/src/assets/images/dingwei.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfcba6f78e96d86ccf23073b4fb2931683c2cb87
GIT binary patch
literal 595
zcmeAS@N?(olHy`uVBq!ia0vp^AT}Qd8;}%R+`Ae`F%}28J29*~C-V}>aY>EvO!M_+
z&;qhK7#Q0#8CXC{fLIEM85o!sFfuR$X-1IP0w%aD*8*lZn-8S$+z&ZZpt8N5E{-7@
zqPBsC*&&Vs^Jd=tes6DsoR@$OPgz;u7SD(L8w?t)i_^1}uQfF-auwm}VtFINy}IG!
zJB~>vleDHT@f2=ZZR#4}XDG1u`@6U2EIxDa)x7!e)?EJn8zq_W<>eJt4&N9A-f1wf
z-m}n*|FZjRyjmbv!annPo^yUbn3ST|mLOvBUNP*dpXlSWXY>B`I<VLt+H`*MP6N$-
z3dghAUiWUczMSBGm+6Gw(wkd+PMxbN&r0Zf8@ID#<@?V|WGWA6vuK(!7M{{;{V-*2
zm{ZL6jw#Fmm#e4CwFLaTu;aO?e^m2+^^oPQ-vh!ECIn7QXa7<s=dQ7-YlX?B$mvhC
z*<Qbn6}*?bsx4<)ZL;g;Hw%je)LnUtwv}#tyYu5EldT_;x$BJ&)F#TwTQ?txaG7@e
zuU_AO?&;G^s<`4+k0|~U(eP}vT$2{TYi(PocI4Zw`KRC9HR6mBo#3oswRqKhkAH0i
zHESdHzg};nQn<y{W4gl+u^q>BjO?#AK7XD2U$S-n%9}dge_GZa{2|D6_v+m5Qzc$?
z%QU{Q=9*LTMDN9go>_ZV{r~mr*2SYLzWL0@S!FHKXNGL>e`2OJZM$^$&3pFwhDR$x
S)DAxcMX0B%pUXO@geCyp5$>Y^

literal 0
HcmV?d00001

diff --git a/src/views/home/layout/streetInfo.vue b/src/views/home/layout/streetInfo.vue
index 1efddc0..468f07d 100644
--- a/src/views/home/layout/streetInfo.vue
+++ b/src/views/home/layout/streetInfo.vue
@@ -1,105 +1,74 @@
 <template>
-  <div
-    class="dialogBox"
-    :style="`left:${elLeft}px;top:${elTop}px`"
-    draggable="true"
-    ref="dialogBoxYpfx"
-    @dragstart="dragstart($event)"
-    @dragend="dragend($event)"
-  >
+  <div class="dialogBox" :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="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
-          {{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
-        </div>
-        <div class="text">
-          负责人：<span class="tag mj">民警</span>
-          <el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh  " placement="bottom">
-            <span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
-          </el-tooltip>
-        </div>
-        <div class="text">
-          开始时间：<span class="name">{{ props.data.bbkssj }}</span>
-        </div>
-        <div class="time">
-          (计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
-        </div>
-        <div class="text">
-          组员：
-          <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">
-          单位：<span class="name">{{ props.data.ssbm }}</span>
-        </div>
-        <div class="text zblist" v-if="props.data.txzb.length <= 0">
-          通讯装备：<span>暂无数据</span>
-        </div>
+      <div class="card">
 
-        <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 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="rightInfo">
+            <div>
+              <span class="zjhm">驾驶员：</span>{{ props.data.cljsy }}
+            </div>
+            <div>
+              <span class="zjhm">车牌号：</span>{{ props.data.cph }}
+            </div>
+            <div>
+              <span class="zjhm">行驶路线：</span>{{ props.data.xlmc }}
+            </div>
+            <div>
+              <span class="zjhm">乘车人数：</span>{{ props.data.ccrs ? props.data.ccrs : 0 }}
+            </div>
+            <div>
+              <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="text zblist" v-if="props.data.jyqx.length <= 0">
-          常用装备：<span>暂无数据</span>
-        </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 class="address">
+          <img class="addImg" src="@/assets/images/dingwei.png" />
+          <span>{{ props.data.xlmc }}</span>
         </div>
       </div>
+
+
     </div>
+
+    <!-- 视频播放区域 -->
+    <div v-if="showVideo" class="video-container">
+      <video ref="videoPlayer" class="video-player" controls autoplay muted :src="videoSrc">
+        您的浏览器不支持视频播放
+      </video>
+    </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="onClickSpsd">视频随动</button>
-          </div>
-        </template>
+      <template #reference>
+        <div class="btnBox">
+          <button class="dp-default small" @click="onClickclgj">车辆轨迹</button>
+          <button class="dp-default small" @click="onClickSpsd">{{showVideo.value?"关闭视频":"视频播放"}}</button>
+        </div>
+      </template>
     </el-popover>
   </div>
 </template>
 
 <script setup>
 import Axios from "axios";
-import { qcckPost,qcckGet} from "@/api/qcckApi.js";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
 import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
 import { timeValidate } from "@/utils/time.js";
 import emitter from "@/utils/eventBus.js";
@@ -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,17 +96,42 @@ const elTop = ref(120); //元素右偏移量
 watch(
   () => props.data,
   (val) => {
+    console.log(val, 'val');
     visible.value = false;
-  },{
-    immediate:true,
-    deep:true
-  }
+  }, {
+  immediate: true,
+  deep: true
+}
 );
 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,82 +198,157 @@ function close() {
     padding: 4px 10px;
     box-sizing: border-box;
   }
-  .infoBox {
-    position: relative;
-    padding: 10px !important;
-    .text {
-      color: #00bfff;
-      line-height: 26px;
-    }
-    .tag {
-      margin: 0 4px;
-    }
-    .name {
-      color: #fff;
-    }
-    .time {
-      color: #3ad2d4;
-    }
-    .jc_box {
-      margin: 0 4px;
-    }
-    .zblist {
+
+  .card {
+    padding: 10px 10px 4px 10px;
+    box-sizing: border-box;
+    border-top: 2px solid #00bfff;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+
+    .card-cnt {
       display: flex;
-      flex-wrap: wrap;
-      .zb-item {
+      background: rgba(255, 255, 255, 0.05);
+      margin-bottom: 4px;
+
+      .leftImg {
+        width: 180px;
         margin-right: 10px;
-        .sbinfo {
+      }
+
+      .rightInfo {
+        flex: 1;
+
+        .title {
+          width: 100%;
+          color: #0095FF;
+          line-height: 28px;
+          margin-right: 20px;
+        }
+
+        .status {
+          padding: 1px 6px;
+          border-radius: 4px;
+          background: #FF3A3A;
+          color: #fff;
+        }
+
+        .zjhm {
+          line-height: 27px;
+          color: #7CBFFF;
+          margin-right: 10px;
+          font-size: 16px;
+        }
+
+        .textflex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .text {
+          font-size: 12px;
+          color: #6585af;
+
+          .info {
+            color: #fff;
+          }
+        }
+
+        .newinfo {
           color: yellow;
         }
-        img {
-          margin-left: 4px;
-          cursor: pointer;
+      }
+    }
+
+    .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%;
         }
-        .qxinfo {
-          color: rgb(127, 177, 217);
-          padding: 2px 4px;
-          border: 1px solid rgb(61, 116, 219);
-          border-radius: 4px;
-          display: inline;
-          white-space: nowrap;
+
+        .el-carousel__item {
+          height: 100%;
+          display: flex;
+          justify-content: space-between;
         }
       }
+
+      img {
+        width: 60px;
+        height: 70px;
+      }
     }
   }
 }
-.all-dialog .dialogBox > .btnBox {
+
+.all-dialog .dialogBox>.btnBox {
   padding-top: 0;
   padding-bottom: 0;
 }
-.timeBox{
+
+.timeBox {
   width: 100%;
   display: flex;
   align-items: center;
-  .time1{
+
+  .time1 {
     margin: 0 10px;
     text-align: center;
     color: #fff;
   }
 }
 
-::v-deep .el-collapse{
+::v-deep .el-collapse {
   width: 100%;
-  --el-collapse-header-height:auto;
-  --el-collapse-header-bg-color:transparent;
-  --el-collapse-border-color:transparent;
+  --el-collapse-header-height: auto;
+  --el-collapse-header-bg-color: transparent;
+  --el-collapse-border-color: transparent;
 }
-::v-deep .el-collapse-item__header{
+
+::v-deep .el-collapse-item__header {
   color: #00bfff;
 }
-::v-deep .el-collapse-item__wrap{
-  background-color:transparent;
+
+::v-deep .el-collapse-item__wrap {
+  background-color: transparent;
 }
+
 ::v-deep .el-collapse-item__content {
   color: #fff;
   padding-bottom: 0;
 }
-.null{
+
+.null {
   text-align: center;
 }
-
-</style>
+</style>
\ No newline at end of file