lcw/xzlz_GjWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1231

Browse Source
This commit is contained in:
Esacpe
2025-07-23 19:15:31 +08:00
parent 7f61aba9d6
commit 4573b25182
4 changed files with 227 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/homeScreen.scss
View File

@ -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;

BIN
src/assets/images/dialog-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/images/dingwei.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

360
src/views/home/layout/streetInfo.vue
View File

@ -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>