1
This commit is contained in:
esacpe
parent
cb03a85a57
commit
cfd88cdcc9
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -542,7 +542,7 @@ export function MapUtil(map) {
|
|||
// 多边形
|
||||
if(type == 'polygon') maker = map.createPolygon(coords,style);
|
||||
_that._self[flag].push(maker);
|
||||
|
||||
|
||||
maker.addEventListener("click", (val) => {
|
||||
if( flag == 'xfq'){
|
||||
maker.highlight(val.id) //高亮展示
|
||||
|
|
|
|||
|
|
@ -5,63 +5,76 @@
|
|||
<img :src="item.isChecked ? item.iconActive : item.icon" :title="item.title" style="max-width:66px" />
|
||||
<div class="resourceBox" v-if="item.hastc">
|
||||
<div class="contant" :class="item.type == 'across' ? 'contantAcross' : ''">
|
||||
<!-- 公安资源 -->
|
||||
<div style="width: 274px;" v-if="item.title == '公安资源'">
|
||||
<div class="name">公安资源</div>
|
||||
<CheckBox ref="refGazy" :data="resource.checkGazy" @changeData="changeDataGazy"></CheckBox>
|
||||
<div class="popover" v-show="isShowPopover">
|
||||
<el-tag effect="dark" v-for="it in D_BZ_BMYWLX" :type="it.inChecek ? 'pramary' : 'info'"
|
||||
@click="chooseTag(it)" :key="it.value">
|
||||
{{ it.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<!-- 巡防区 -->
|
||||
<div style="width: 250px;padding-left: 20px;box-sizing: border-box;" v-if="item.title == '巡防区'">
|
||||
<el-radio-group v-model="radioValue" @change="chooseTag">
|
||||
<el-radio v-for="it in D_BZ_BMYWLX" :label="it.label" :value="it" :key="it.value" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CheckBox from "@/components/checkBox/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { dateFormat } from "@/utils/auth.js";
|
||||
import { getRecentDay } from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, defineEmits, onMounted, getCurrentInstance, onUnmounted, watch } from "vue";
|
||||
import { getGazyPointList, } from "@/api/dpApi/home.js";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, defineEmits, onMounted, getCurrentInstance, watch, reactive } from "vue";
|
||||
import { getGazyPointList } from "@/api/dpApi/home.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BMYWLX, JQLB_DP } = proxy.$dict("D_BZ_BMYWLX", "JQLB_DP");
|
||||
const { D_BZ_BMYWLX } = proxy.$dict("D_BZ_BMYWLX");
|
||||
const emit = defineEmits(["myClick"]);
|
||||
const isShowPopover = ref(false)
|
||||
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||||
const jqLx = ref({
|
||||
list: [],
|
||||
hasChoose: [],
|
||||
})
|
||||
const isShowKeyBox = ref(false)
|
||||
const gzymc = ref('')
|
||||
const keyList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
watch(() => JQLB_DP, val => {
|
||||
jqLx.value.list = val.value.map(item => { return item.label })
|
||||
let arr = ['打架斗殴', '侵财(两抢一盗)']
|
||||
jqLx.value.list = jqLx.value.list.concat(arr)
|
||||
}, { deep: true })
|
||||
watch(() => gzymc.value, val => {
|
||||
if (val == '') isShowKeyBox.value = false
|
||||
}, { deep: true })
|
||||
|
||||
const radioValue = ref('')
|
||||
const footBtnImg = ref([
|
||||
{
|
||||
hastc: true,
|
||||
hastc: false,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-gazy-active.png'),
|
||||
icon: require("@/assets/my/icon-gazy.png"),
|
||||
title: "公安资源",
|
||||
title: "公安局",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: false,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-jq-active.png'),
|
||||
icon: require("@/assets/my/icon-jq.png"),
|
||||
title: "派出所",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: false,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-shzy-active.png'),
|
||||
icon: require("@/assets/my/icon-shzy.png"),
|
||||
title: "警务站",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: true,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-sb-active.png'),
|
||||
icon: require("@/assets/my/icon-sb.png"),
|
||||
title: "巡防区",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: false,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-kfd-active.png'),
|
||||
icon: require("@/assets/my/icon-kfd.png"),
|
||||
title: "快反点",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
hastc: false,
|
||||
isChecked: false,
|
||||
iconActive: require('@/assets/my/icon-zdfk-active.png'),
|
||||
icon: require("@/assets/my/icon-zdfk.png"),
|
||||
title: "重点防控点",
|
||||
type: 'vertical'
|
||||
},
|
||||
{
|
||||
|
|
@ -73,49 +86,9 @@ const footBtnImg = ref([
|
|||
}
|
||||
]);
|
||||
|
||||
let resource = ref({
|
||||
checkGazy: {
|
||||
list: ["公安局", "派出所", "警务站", '巡防区', '快反点', '重点防控点'],
|
||||
hasChoose: []
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const selectTime = ref("今日"); //选择的时间类型
|
||||
const tcType = ref([]); //警情图层类型
|
||||
const sjzyTime = ref([
|
||||
dateFormat(new Date(), "YY-MM-DD"),
|
||||
dateFormat(new Date(), "YY-MM-DD")
|
||||
]);
|
||||
const selectTimeYj = ref("今日"); //选择的时间类型
|
||||
const tcYjType = ref([]); //预警图层类型
|
||||
const fzycFlag = ref(false);
|
||||
const sjzyTimeYj = ref([
|
||||
dateFormat(new Date(), "YY-MM-DD"),
|
||||
dateFormat(new Date(), "YY-MM-DD")
|
||||
]);
|
||||
const isSd = ref(true); //是否随动
|
||||
const selectCircleDistance = ref("");
|
||||
|
||||
const isSelected = ref(false);
|
||||
onMounted(() => {
|
||||
emitter.emit("getCoordinatePoint", "PIO");
|
||||
window.openTExt = openTExt;
|
||||
isSelected.value = false;
|
||||
emitter.on("followUp", (res) => { isSd.value = res; });
|
||||
});
|
||||
|
||||
|
||||
const cancelJl = ref([])
|
||||
const cancelJl1 = ref([])
|
||||
|
||||
// 获取范围中心的
|
||||
function getCenterPoint(dm, text, id) {
|
||||
qcckPost(dm, '/mosty-base/other/getZxd').then(res => {
|
||||
let points = [res.x, res.y]
|
||||
emitter.emit("addTEXT", { points, text, id });
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 高亮巡防区域
|
||||
function openTExt(id) {
|
||||
|
|
@ -128,15 +101,34 @@ function openTExt(id) {
|
|||
|
||||
// 判断是否选择按钮
|
||||
function chooseIcon(item) {
|
||||
item.isChecked = !item.isChecked;
|
||||
switch (item.title) {
|
||||
case "清除":
|
||||
clearAll()
|
||||
case '公安局':
|
||||
if (item.isChecked) showGazyMarker('公安局');
|
||||
else emitter.emit("deletePointArea", "gaj"); //清除公安局
|
||||
break;
|
||||
case "设备位置":
|
||||
item.isChecked = !item.isChecked;
|
||||
emitter.emit("deletePointArea", "sbwz_car");
|
||||
emitter.emit("deletePointArea", "sbwz_sb");
|
||||
if (item.isChecked) showSbList()
|
||||
case '派出所':
|
||||
if (item.isChecked) showGazyMarker('派出所');
|
||||
else emitter.emit("deletePointArea", "pcs"); //清除派出所
|
||||
break;
|
||||
case '警务站':
|
||||
if (item.isChecked) showGazyMarker('警务站');
|
||||
else emitter.emit("deletePointArea", "jwz"); //清除警务站
|
||||
break;
|
||||
case '重点防控点':
|
||||
if (item.isChecked) showGazyMarker('重点防控点');
|
||||
else emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
|
||||
break;
|
||||
case '快反点':
|
||||
if (item.isChecked) {
|
||||
showGazyMarker('快反点');
|
||||
} else {
|
||||
emitter.emit("deletePointArea", "kfd");//清除快反点
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
}
|
||||
break;
|
||||
case '清除':
|
||||
clearAll()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,86 +136,24 @@ function chooseIcon(item) {
|
|||
|
||||
//一键清除
|
||||
function clearAll() {
|
||||
calesrnSP()
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc");
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("bd_closeOverlay", true);
|
||||
emitter.emit("closeAllDialog");
|
||||
emitter.emit("deletePointArea", "xfqJS"); //清除巡防区高亮
|
||||
emitter.emit("removePlot", 'quan'); //移除绘制工具
|
||||
emitter.emit("clearThermodynamicChart", 'yjMap'); //清除热力图
|
||||
emitter.emit("clearThermodynamicChart", 'jqMap'); //清除热力图
|
||||
emitter.emit("clearmakerSqure");
|
||||
emitter.emit("drawLineAnimation", 'route');
|
||||
emitter.emit("deletePointArea", 'yuan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("removeEara", 'quan');
|
||||
emitter.emit("deletePointArea", "sbwz_car");
|
||||
emitter.emit("deletePointArea", "sbwz_sb");
|
||||
emitter.emit("deletePointArea", "ohterline");
|
||||
emitter.emit("deletePointArea", "gapTextTitle");
|
||||
emitter.emit("deletePointArea", "gapline");
|
||||
selectTime.value = "今日";
|
||||
selectTimeYj.value = "今日";
|
||||
gzymc.value = ''
|
||||
sjzyTime.value = [getRecentDay(0), getRecentDay(0)];
|
||||
sjzyTimeYj.value = [getRecentDay(0), getRecentDay(0)];
|
||||
tcType.value = [];
|
||||
tcYjType.value = [];
|
||||
isShowPopover.value = false
|
||||
resource.value.checkGazy.hasChoose = [];
|
||||
cancelJl1.value = []
|
||||
cancelJl.value = []
|
||||
jqLx.value.hasChoose = [];
|
||||
keyList.value = [];
|
||||
gzymc.value = '';
|
||||
selectCircleDistance.value = ''
|
||||
D_BZ_BMYWLX.value.forEach(v => { v.inChecek = false })
|
||||
radioValue.value = ''
|
||||
footBtnImg.value.forEach(v => { v.isChecked = false })
|
||||
isShoePolice([])
|
||||
}
|
||||
|
||||
function calesrnSP() {
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
emitter.emit("deletePointArea", "kk");
|
||||
emitter.emit("deletePointArea", "jqMap");
|
||||
emitter.emit("deletePointArea", "yjMap");
|
||||
}
|
||||
|
||||
// 选择公安资源
|
||||
function changeDataGazy(val) {
|
||||
footBtnImg.value[2].isChecked = val.length > 0 ? true : false //公安资源是否选中
|
||||
let arr = JSON.parse(JSON.stringify(resource.value.checkGazy.hasChoose))
|
||||
val.forEach(item => { if (!arr.includes(item)) showGazyMarker(item) })
|
||||
resource.value.checkGazy.hasChoose = val //缓存选中的值
|
||||
isShowPopover.value = val.includes('巡防区') ? true : false //巡访区的选项弹窗（目前是单选）
|
||||
if (!val.includes('公安局')) emitter.emit("deletePointArea", "gaj"); //清除公安局
|
||||
if (!val.includes('派出所')) emitter.emit("deletePointArea", "pcs"); //清除派出所
|
||||
if (!val.includes('警务站')) emitter.emit("deletePointArea", "jwz"); //清除警务站
|
||||
if (!val.includes('重点防控点')) emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
|
||||
if (!val.includes('巡防区')) {
|
||||
emitter.emit("deletePointArea", "xfq"); //清除巡防区
|
||||
emitter.emit("deletePointArea", "ohterline");
|
||||
emitter.emit("deletePointArea", "gapline");
|
||||
emitter.emit("deletePointArea", "gapTextTitle");
|
||||
}
|
||||
if (!val.includes('快反点')) {
|
||||
emitter.emit("deletePointArea", "kfd");//清除快反点
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function chooseTag(item) {
|
||||
D_BZ_BMYWLX.value.forEach(v => { if (v.label != item.label) v.inChecek = false })
|
||||
// 选择巡防区域
|
||||
function chooseTag(val) {
|
||||
footBtnImg.value[3].isChecked = true;
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deleteText");
|
||||
item.inChecek = !item.inChecek;
|
||||
if (item.inChecek) {
|
||||
showGazyMarker('巡防区', item.dm)
|
||||
} else {
|
||||
showGazyMarker('巡防区')
|
||||
}
|
||||
let obj = D_BZ_BMYWLX.value.find(item => {
|
||||
return item.label == val
|
||||
})
|
||||
if(obj) showGazyMarker('巡防区', obj.dm)
|
||||
}
|
||||
|
||||
// 显示公安资源信息
|
||||
|
|
@ -270,7 +200,8 @@ function showGazyMarker(val, dm) {
|
|||
let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
|
||||
if (dm) data.bz = dm
|
||||
getGazyPointList(data).then((res) => {
|
||||
if (res) {
|
||||
console.log(res);
|
||||
if ( res && res.records.length > 0) {
|
||||
let color = { stops: [], property: 'FID', }
|
||||
let linecolor = { stops: [] }
|
||||
let arrs = res.records.map((item, idx) => {
|
||||
|
|
@ -293,8 +224,6 @@ function changeColor(hex, opacity) {
|
|||
return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 处理撒点
|
||||
function handlePoint(arr, icon, flag, scale) {
|
||||
let list = arr.filter((item) => { return item.jd && item.wd; });
|
||||
|
|
@ -311,13 +240,6 @@ function handleArr(obj) {
|
|||
emitter.emit("polygonFigure", params);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("followUp");
|
||||
emitter.off("getCoord");
|
||||
emitter.off("getcentercoord");
|
||||
emitter.off("coordString");
|
||||
emitter.off("showGazy");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -370,7 +292,7 @@ onUnmounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
color: #00BFFF;
|
||||
color: #00bfff;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
|
|
@ -385,7 +307,6 @@ onUnmounted(() => {
|
|||
::v-deep .el-radio-group {
|
||||
width: 100%;
|
||||
// padding-left:20px;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
|
|
@ -406,17 +327,17 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #01E9ED;
|
||||
color: #01e9ed;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #01E9ED;
|
||||
border-color: #01E9ED;
|
||||
background-color: #01e9ed;
|
||||
border-color: #01e9ed;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #01E9ED;
|
||||
border-color: #01E9ED;
|
||||
background-color: #01e9ed;
|
||||
border-color: #01e9ed;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
|
|
|
|||
|
|
@ -11,32 +11,63 @@
|
|||
<div class="box-title">街面巡组</div>
|
||||
<div class="searchInfo-xf">
|
||||
<el-popover placement="left" width="300px" :append-to-body="false" :visible="visible" trigger="click">
|
||||
<template #reference>
|
||||
<Search size="20" @click="visible = !visible" />
|
||||
<template #reference>
|
||||
<Search size="20" @click="visible = !visible"/>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-form :model="dataForm" :inline="true">
|
||||
<el-form-item label="关键字" label-width="68px">
|
||||
<el-input v-model="dataForm.keyword" placeholder="请输入关键字" clearable />
|
||||
<template #default>
|
||||
<el-form :model="dataForm" :inline="true" >
|
||||
<el-form-item label="关键字" label-width="68px">
|
||||
<el-input v-model="dataForm.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" label-width="68px">
|
||||
<MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" label-width="68px">
|
||||
<MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" label-width="68px">
|
||||
<el-input v-model="dataForm.fzrXm" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="警组" label-width="68px">
|
||||
<el-input v-model="dataForm.jzMc" placeholder="请输入警组" clearable />
|
||||
</el-form-item>
|
||||
<div style="text-align: center;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset"> 重置 </el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form-item label="负责人" label-width="68px" >
|
||||
<el-input v-model="dataForm.fzrXm" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="警组" label-width="68px">
|
||||
<el-input v-model="dataForm.jzMc" placeholder="请输入警组" clearable />
|
||||
</el-form-item>
|
||||
<div style="text-align: center;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset"> 重置 </el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="boxInfo">
|
||||
<div class="checkBox">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="groupList" v-loading="loading">
|
||||
<li :class="item.isChecked?'active':''" v-for="item in xzList.list" :key="item.id" @click="handelClick(item)" >
|
||||
<div class="leftInfo">
|
||||
<div class="top-cnt">
|
||||
<div class="top-cnt-title">
|
||||
<img :src="item.lx == '02' ? JJ : item.lx == '03'? PCSMJ : TJ" />
|
||||
<span>{{ item.jzMc ? item.jzMc : item.fzrXm + "巡组" }}</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
负责人：{{ item.fzrXm }} {{ item.fzrLxdh }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<img src="@/assets/images/situationPresentation/dingwei.png" />
|
||||
<span class="tools"><el-tooltip :content="item.dqwz" placement="top">{{ item.dqwz }}</el-tooltip></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sxt"><img src="@/assets/my/sxt.png" /></div>
|
||||
<div class="xlStatus" :class="item.xfzt == 1?'lineing':item.xfzt == 2?'unline':'line'">
|
||||
{{item.xfzt == 1?'处警中':item.xfzt == 2?'离线':'巡逻中'}}
|
||||
</div>
|
||||
</li>
|
||||
<el-empty
|
||||
description="没有数据"
|
||||
:image-size="0.1"
|
||||
v-if="!loading && xzList.list.length <= 0"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -49,10 +80,10 @@ import CheckBox from "@/components/checkBox/index";
|
|||
import { getSelectDeckList } from "@/api/dpApi/home.js";
|
||||
import openWebSocket from "@/utils/webSocket.js";
|
||||
import { useStore } from "vuex";
|
||||
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from "vue";
|
||||
import { ref, reactive, onMounted, defineEmits,onBeforeUnmount } from "vue";
|
||||
const checkData = reactive({
|
||||
list: [],
|
||||
hasChoose: []
|
||||
list: ["巡逻中", "离线"],
|
||||
hasChoose: ["巡逻中","便衣"]
|
||||
});
|
||||
const TJ = require(`@/assets/mapIcon/specialPolice.png`);
|
||||
const JJ = require(`@/assets/mapIcon/trafficPolice.png`);
|
||||
|
|
@ -62,12 +93,10 @@ const loading = ref(false); //警组加载
|
|||
let xzList = reactive({
|
||||
list: []
|
||||
}); //巡组数据
|
||||
const zzlx = ref(null)
|
||||
const pageSize = ref(500);
|
||||
const pageCurrent = ref(1);
|
||||
const totalPage = ref(0);
|
||||
const status = ref([0, 1, 2]); //巡组状态
|
||||
const qwlx = ref('01,02')
|
||||
const status = ref([0,1,2]); //巡组状态
|
||||
const jd = ref(104.14637342);
|
||||
const dataForm = ref({})
|
||||
const visible = ref(false)
|
||||
|
|
@ -76,13 +105,14 @@ let timer;
|
|||
onMounted(() => {
|
||||
_ggetSelectDeckList("0,1,2");// 查询巡逻中数据
|
||||
getWebSocketData();//websoket
|
||||
emitter.on("showGroupPoint", val => {
|
||||
handelscroll()//滚动加载
|
||||
emitter.on("showGroupPoint",val=>{
|
||||
isTootChange.value = true
|
||||
_ggetSelectDeckList("0,1,2");// 查询巡逻中数据
|
||||
})
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
onBeforeUnmount(()=>{
|
||||
openWebSocket.close()
|
||||
emitter.off("showGroupPoint")
|
||||
})
|
||||
|
|
@ -97,12 +127,12 @@ function getWebSocketData() {
|
|||
let newsDate = JSON.parse(e.data);
|
||||
switch (newsDate.type) {
|
||||
//一键报警
|
||||
case "01":
|
||||
case "01":
|
||||
let { jd, wd } = newsDate.data;
|
||||
emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint" });
|
||||
emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint"});
|
||||
emitter.emit("SsCircle", JSON.parse(e.data).data);
|
||||
break;
|
||||
//一键报警处置完成
|
||||
//一键报警处置完成
|
||||
case "02":
|
||||
emitter.emit("clearCircle", JSON.parse(e.data).data);
|
||||
let ids = document.getElementById(JSON.parse(e.data).data);
|
||||
|
|
@ -124,14 +154,14 @@ function getWebSocketData() {
|
|||
if (value.id == dataInfo.id && isShowGroupPoint) {
|
||||
delPointMaker(dataInfo); //清除原来的撒点
|
||||
xzList.list.splice(index, 1);
|
||||
if (dataInfo.xfzt != 2) {
|
||||
if(dataInfo.xfzt != 2){
|
||||
xzList.list.unshift(dataInfo);
|
||||
addPointMaker([dataInfo]); //撒点
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
// 结束报备
|
||||
// 结束报备
|
||||
case "05":
|
||||
xzList.list.forEach((value, index) => {
|
||||
if (value.id == dataInfo.id && isShowGroupPoint) {
|
||||
|
|
@ -150,11 +180,11 @@ function getWebSocketData() {
|
|||
}
|
||||
|
||||
|
||||
function handleFilter() {
|
||||
function handleFilter(){
|
||||
changeData(checkData.hasChoose)
|
||||
visible.value = false
|
||||
}
|
||||
function reset() {
|
||||
function reset(){
|
||||
dataForm.value = {}
|
||||
visible.value = false
|
||||
handleFilter()
|
||||
|
|
@ -167,52 +197,42 @@ function changeData(val) {
|
|||
isTootChange.value = false;
|
||||
let scrollTargetBox = document.querySelector(".groupList");
|
||||
scrollTargetBox.scrollTop = 0
|
||||
if (val.length == 0) {
|
||||
if(val.length == 0){
|
||||
emitter.emit("deletePointZBAll"); ////清除装备-人员
|
||||
status.value = ''
|
||||
xzList.list = []
|
||||
} else {
|
||||
}else{
|
||||
let arr = []
|
||||
let brr = []
|
||||
zzlx.value = null
|
||||
val.forEach(item => {
|
||||
if (item == '巡逻中') arr.push(0)
|
||||
if (item == '处警中') arr.push(1)
|
||||
if (item == '离线') arr.push(2)
|
||||
if (item == '机关值班') brr.push('01')
|
||||
if (item == '动中备勤') brr.push('02')
|
||||
if (item == '其他勤务') brr.push('03')
|
||||
if (item == '便衣') zzlx.value = '1'
|
||||
val.forEach(item=>{
|
||||
if(item == '巡逻中') arr.push(0)
|
||||
if(item == '离线') arr.push(2)
|
||||
})
|
||||
status.value = arr.join(',')
|
||||
qwlx.value = brr.join(',')
|
||||
_ggetSelectDeckList(status.value, qwlx.value);
|
||||
_ggetSelectDeckList(status.value);
|
||||
}
|
||||
}
|
||||
//巡组列表
|
||||
function _ggetSelectDeckList(staus, qwlx) {
|
||||
if (!isTootChange.value) loading.value = true;
|
||||
function _ggetSelectDeckList(staus) {
|
||||
if(!isTootChange.value) loading.value = true;
|
||||
let data = {
|
||||
xfzt: staus,
|
||||
qwlx: qwlx,
|
||||
xfzt:staus,
|
||||
pageSize: pageSize.value,
|
||||
pageCurrent: pageCurrent.value,
|
||||
fzrXm: dataForm.value.fzrXm,
|
||||
jzMc: dataForm.value.jzMc,
|
||||
ssbmdm: dataForm.value.ssbmdm,
|
||||
keyword: dataForm.value.keyword,
|
||||
fzrXm:dataForm.value.fzrXm,
|
||||
jzMc:dataForm.value.jzMc,
|
||||
ssbmdm:dataForm.value.ssbmdm,
|
||||
keyword:dataForm.value.keyword,
|
||||
};
|
||||
if (zzlx.value && checkData.hasChoose.length != 7) data.zzlx = zzlx.value;
|
||||
getSelectDeckList(data).then((res) => {
|
||||
emitter.emit("deletePointZBAll"); //清除装备-人员
|
||||
loading.value = false;
|
||||
let arr = res.records ? res.records : [];
|
||||
xzList.list = pageCurrent.value == 1 ? arr : xzList.list.concat(arr);
|
||||
xzList.list = pageCurrent.value == 1 ? arr : xzList.list.concat(arr);
|
||||
let icon = require(`@/assets/mapIcon/police-car-bx.png`)
|
||||
let brrSd = xzList.list.filter((v) => { return v.jd && v.wd; });
|
||||
if (isShowGroupPoint) {
|
||||
if(isShowGroupPoint) {
|
||||
addPointMaker(brrSd) //撒点
|
||||
emitter.emit("setMapCenter", { location: [brrSd[0].jd, brrSd[0].wd], zoomLevel: 10 });
|
||||
emitter.emit("setMapCenter", {location: [brrSd[0].jd, brrSd[0].wd], zoomLevel: 10 });
|
||||
}
|
||||
}).catch(() => { loading.value = false; });
|
||||
}
|
||||
|
|
@ -224,7 +244,7 @@ const delPointMaker = (data) => {
|
|||
};
|
||||
// 撒点
|
||||
const addPointMaker = (data) => {
|
||||
let pramas = { coords: data, isBounds: true, showTitle: true, flag: "rx" }
|
||||
let pramas = { coords: data,isBounds:true,showTitle:true,flag: "rx" }
|
||||
emitter.emit("addPointArea", pramas);
|
||||
};
|
||||
//查看警组信息
|
||||
|
|
@ -233,12 +253,12 @@ function handelClick(item) {
|
|||
emitter.emit("deletePointArea", "route");
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
xzList.list.forEach(v => { if (v.id != item.id) v.isChecked = false })
|
||||
xzList.list.forEach(v=>{ if(v.id != item.id) v.isChecked = false})
|
||||
item.isChecked = !item.isChecked
|
||||
emitter.emit("showJzInfo", item);
|
||||
if (item.jd && item.wd) {
|
||||
store.commit("user/setActiveId", item.id);
|
||||
emitter.emit("setMapCenter", { location: [item.jd, item.wd], zoomLevel: 12 });
|
||||
emitter.emit("setMapCenter", { location: [item.jd, item.wd], zoomLevel: 12 });
|
||||
}
|
||||
}
|
||||
//触底加载
|
||||
|
|
@ -262,131 +282,108 @@ function handelscroll() {
|
|||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #fff;
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: yellow;
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:yellow;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #b2be0d;
|
||||
border-color: #b2be0d;
|
||||
border-color:#b2be0d;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #b2be0d;
|
||||
border-color: #b2be0d;
|
||||
border-color:#b2be0d;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
.boxContent{
|
||||
position: relative;
|
||||
|
||||
// z-index:99;
|
||||
.searchInfo-xf {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 20px;
|
||||
|
||||
::v-deep .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.searchInfo-xf{
|
||||
position:absolute;
|
||||
top:32px;
|
||||
right:20px;
|
||||
::v-deep .icon{
|
||||
width:20px ;
|
||||
height:20px;
|
||||
}
|
||||
|
||||
::v-deep .el-popper.is-light {
|
||||
::v-deep .el-popper.is-light{
|
||||
background: #0a1d43;
|
||||
border: 1px solid #4565a4;
|
||||
}
|
||||
|
||||
::v-deep .el-popper.is-light .el-form-item__label {
|
||||
color: #fff;
|
||||
::v-deep .el-popper.is-light .el-form-item__label{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-popper.is-light .el-popper__arrow::before {
|
||||
border: 1px solid #4565a4;
|
||||
background: #0a1d43;
|
||||
::v-deep .el-popper.is-light .el-popper__arrow::before{
|
||||
border: 1px solid #4565a4;
|
||||
background: #0a1d43;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.groupList {
|
||||
height: calc(100% - 67px);
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
padding-bottom: 3px;
|
||||
border: 1px solid #0d5897;
|
||||
border:1px solid #0d5897;
|
||||
box-shadow: inset 0 0 10px #0d5897;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0px 0px 15px #0474c3;
|
||||
}
|
||||
|
||||
.leftInfo {
|
||||
flex: 1;
|
||||
|
||||
.top-cnt {
|
||||
padding: 0 12px;
|
||||
padding-top: 8px;
|
||||
line-height: 22px;
|
||||
padding-bottom: 6px;
|
||||
|
||||
.top-cnt-title {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 4px;
|
||||
width: 15px;
|
||||
width:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #00bfff;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.bz {
|
||||
.bz{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
margin: 0 14px;
|
||||
border-top: 1px solid #162f55;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #6486ae;
|
||||
display: flex;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: 6px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.tools {
|
||||
display: inline-block;
|
||||
max-width: 270px;
|
||||
.tools{
|
||||
display:inline-block;
|
||||
max-width:270px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sxt {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
margin-left: 10px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
|
|
@ -394,18 +391,15 @@ ul.groupList {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
border: 1px solid #108fe7;
|
||||
box-shadow: inset 0 0 10px #108fe7;
|
||||
box-shadow:inset 0 0 10px #108fe7;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
::v-deep .el-checkbox{
|
||||
margin-right: 11px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user