'保安项目提交'
This commit is contained in:
esacpe
465
src/views/homeMy/layout/streetInfo.vue
Normal file
465
src/views/homeMy/layout/streetInfo.vue
Normal file
@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<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 @click="close" class="close">
|
||||
<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="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" src="@/assets/my/sxt.png" @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>
|
||||
|
||||
<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" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区</button>
|
||||
<!-- <button class="dp-default small" v-else-if="props.data.xffwlx == 2" @click="getKfdData">快反点</button> -->
|
||||
<!-- <button class="dp-default small" v-else @click="getKfdData">检查站</button> -->
|
||||
<button class="dp-default small" @click="onClickZbyj">周边预警</button>
|
||||
<button class="dp-default small" @click="onClickSpsd">视频随动</button>
|
||||
<button class="dp-default small" @click="visible = !visible">轨迹回放</button>
|
||||
<!-- <JqTable :configer="{ placement:'right',lx:'jq',width:600}" :data="props.data">
|
||||
<template #info>
|
||||
<button class="dp-default small" >关联警情</button>
|
||||
</template>
|
||||
</JqTable> -->
|
||||
</div>
|
||||
</template>
|
||||
<div class="timeBox">
|
||||
<div class="time1">{{ dateRange[0] }}</div>
|
||||
<el-slider
|
||||
class="playtime-slider"
|
||||
v-model="playTime"
|
||||
id="playtimeSlider"
|
||||
:range="true"
|
||||
:min="sliderMIn"
|
||||
:max="sliderMax"
|
||||
:format-tooltip="playTimeFormat"
|
||||
@change="playTimeChange"
|
||||
:key="videoTndex"
|
||||
>
|
||||
</el-slider>
|
||||
<div class="time1">{{ dateRange[1] }}</div>
|
||||
</div>
|
||||
<div style="text-align: center; width: 100%">
|
||||
<el-button @click.stop="chooseTime">确定</el-button>
|
||||
<el-button @click.stop="onClickGjhf">回放</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Axios from "axios";
|
||||
import JqTable from './jqTable.vue'
|
||||
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";
|
||||
import { getTbWzXfwzSelectTrack } from "@/api/dpApi/zzzh.js";
|
||||
import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid, queryListfzyc } from "@/api/dpApi/home.js";
|
||||
import { getXfgj } from "@/api/yjCenter.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { all } from "ol/events/condition";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const visible = ref(false);
|
||||
const times = ref(null);
|
||||
const router = useRouter();
|
||||
|
||||
const zbList = ref(); //犯罪坐标
|
||||
const fzycFlag = ref(false);
|
||||
|
||||
const dialogBoxYpfx = ref();
|
||||
const initWidth = ref(0); //父元素宽度
|
||||
const initHeight = ref(0); //父元素高度
|
||||
const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
|
||||
const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
|
||||
const elLeft = ref(440); //元素左偏移量
|
||||
const elTop = ref(130); //元素右偏移量
|
||||
|
||||
const dateRange = ref([]); //时间
|
||||
const playTime = ref();
|
||||
const sliderMIn = ref(0)
|
||||
const sliderMax = ref(0)
|
||||
const videoTndex = ref(1)
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
visible.value = false;
|
||||
let ks = val.bbkssj
|
||||
let js = val.bbjssj ? val.bbjssj : timeValidate(new Date())
|
||||
dateRange.value = [ks,js]
|
||||
let start = new Date(ks).getTime()
|
||||
let end = new Date(js).getTime()
|
||||
sliderMIn.value = start
|
||||
sliderMax.value = end
|
||||
playTime.value = [start,end]
|
||||
},{
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
initBodySize();
|
||||
});
|
||||
|
||||
|
||||
//初始化
|
||||
const initBodySize = () => {
|
||||
initWidth.value = dialogBoxYpfx.value.clientWidth;
|
||||
initHeight.value = dialogBoxYpfx.value.clientHeight;
|
||||
};
|
||||
//拖拽开始
|
||||
const dragstart = (e) => {
|
||||
startClientX.value = e.clientX;
|
||||
startClientY.value = e.clientY;
|
||||
};
|
||||
//拖拽结束
|
||||
const dragend = (e) => {
|
||||
let x = e.clientX - startClientX.value;
|
||||
let y = e.clientY - startClientY.value;
|
||||
elLeft.value += x;
|
||||
elTop.value += y;
|
||||
};
|
||||
|
||||
// 执法记录仪呼叫
|
||||
function getZFJLY(item) {
|
||||
if (item.sfrh == "1") SPPUC.rdCard(item.hh, 6, ["60%", "40%"]);
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
emitter.emit("deletePointArea", "largeIcon");
|
||||
visible.value = false;
|
||||
emitter.emit("showJzInfo", false);
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
emitter.emit("deletePointArea", "route");
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
}
|
||||
|
||||
// 滑块提示
|
||||
function playTimeFormat(val) {
|
||||
let time = new Date(val)
|
||||
return timeValidate(time)
|
||||
}
|
||||
|
||||
//选中时间
|
||||
function playTimeChange(val) {
|
||||
let kssj = timeValidate(val[0])
|
||||
let jssj = timeValidate(val[1])
|
||||
dateRange.value = [kssj,jssj]
|
||||
}
|
||||
|
||||
//获取轨迹回放数据
|
||||
function _getTbWzXfwzSelectTrack() {
|
||||
getTbWzXfwzSelectTrack().then((res) => {});
|
||||
}
|
||||
// 根据时间来画轨迹
|
||||
function chooseTime() {
|
||||
let params = {
|
||||
bbId: props.data.id,
|
||||
kssj: dateRange.value.length > 0 ? dateRange.value[0] : "",
|
||||
jssj: dateRange.value.length > 0 ? dateRange.value[1] : ""
|
||||
};
|
||||
|
||||
emitter.emit("deletePointArea", "route");
|
||||
qcckPost(params, "/mosty-jmxf/tbWzXfwz/selectLswz").then((res) => {
|
||||
let arr = res || [];
|
||||
let points = [];
|
||||
arr.forEach((item) => { points.push([item.jd, item.wd]) });
|
||||
if (points.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
});
|
||||
}
|
||||
// 巡防轨迹
|
||||
function onClickGjhf() {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
getXfgj({ bbid: props.data.id }).then((res) => {
|
||||
if (res && res.zbList && res.zbList.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:res.zbList,isClear:true,flag:'route'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
});
|
||||
}
|
||||
// 巡防轨迹-把数据拆分个多个-模拟动态加载
|
||||
function handleAnimation(arr, subLen) {
|
||||
let newAarry = [];
|
||||
let index = 0;
|
||||
while (index < arr.length) {
|
||||
newAarry.push(arr.slice(index, (index += subLen)));
|
||||
}
|
||||
return newAarry;
|
||||
}
|
||||
//获取巡防区数据
|
||||
function getXfqData() {
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
let ids = props.data.xffwid.split(",");
|
||||
if (ids.length > 0) {
|
||||
ids.forEach((el) => {
|
||||
getTbJcglXfqySelectById({id: el }).then((res) => {
|
||||
if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
if (res.pgis.length <= 0) return;
|
||||
getSp(res.pgis)
|
||||
let obj = { position:[res.pgis], text:res.xfqMc, id: res.id}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: false });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
function getSp(pgis) {
|
||||
qcckPost({pgis},'/mosty-jmxf/tbYsSxt/getList').then(res=>{
|
||||
let list = res ? res : [];
|
||||
let icon = require("@/assets/point/sp.png");
|
||||
list = list.filter((item) => { return item.jd && item.wd;});
|
||||
if(list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: 'sp',fontColor:'#FF0000' });
|
||||
})
|
||||
}
|
||||
|
||||
// 获取范围中心的
|
||||
function getCenterPoint(dm, text) {
|
||||
qcckPost(dm, "/mosty-base/other/getZxd").then((res) => {
|
||||
let points = [res.x, res.y];
|
||||
emitter.emit("addTEXT", { points, text });
|
||||
});
|
||||
}
|
||||
//获取快反点数据
|
||||
function getKfdData() {
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
|
||||
if (res) {
|
||||
//点位数据
|
||||
if (!res.jd || !res.wd) return;
|
||||
//一分钟范围
|
||||
if (res.yfzfw.length > 0) {
|
||||
let obj = { position:[res.yfzfw], text:'', id: '11'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
|
||||
}
|
||||
//三分钟范围
|
||||
if (res.sfzfw.length > 0) {
|
||||
let obj1 = { position:[res.sfzfw], text:'', id: '211'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
|
||||
}
|
||||
//五分钟范围
|
||||
if (res.wfzfw.length > 0) {
|
||||
let obj2 = { position:[res.wfzfw], text:'', id: '131'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
|
||||
}
|
||||
let icon = require("@/assets/point/kfd.png");
|
||||
emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
|
||||
emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
} else {
|
||||
ElMessage({ message: "暂无快反点数据", type: "warning" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//点击视频随动
|
||||
function onClickSpsd() {
|
||||
emitter.emit("closeVideo");
|
||||
let { jd, wd } = props.data;
|
||||
emitter.emit("clickSpsd", { jd, wd });
|
||||
}
|
||||
//点击周边预警
|
||||
function onClickZbyj() {
|
||||
emitter.emit("closeVideo");
|
||||
let { jd, wd } = props.data;
|
||||
emitter.emit("clickZbyj", { jd, wd });
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.dialogBox {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 484px !important;
|
||||
.title {
|
||||
border-bottom: 1px solid #275288;
|
||||
margin-bottom: 6px;
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.info-Big-Box {
|
||||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.zb-item {
|
||||
margin-right: 10px;
|
||||
.sbinfo {
|
||||
color: yellow;
|
||||
}
|
||||
img {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-collapse{
|
||||
width: 100%;
|
||||
--el-collapse-header-height:auto;
|
||||
--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>
|
||||
Reference in New Issue
Block a user