971 lines
26 KiB
Vue
971 lines
26 KiB
Vue
<!--
|
||
* @Author: ZR
|
||
* @Date: 2023-11-06 09:43:52
|
||
* @LastEditTime: 2024-10-09 10:29:23
|
||
* @LastEditors: Please set LastEditors
|
||
* @Description: In User Settings Edit
|
||
-->
|
||
<template>
|
||
<div class="bigScrenn">
|
||
<!-- 头部 -->
|
||
<GdMap :isShow="true" />
|
||
|
||
<Head></Head>
|
||
<div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '442px' }"
|
||
@click="showClassL = !showClassL"></div>
|
||
<div class="asideBox transition" :style="{ left: showClassL ? '-446px' : '0px' }">
|
||
<!-- 工作情况 -->
|
||
<div class="boder-small back-color">
|
||
<WorkCondition />
|
||
</div>
|
||
<!-- 街面巡组 -->
|
||
<div class="boder-small">
|
||
<StreetGroup />
|
||
</div>
|
||
<div class="boder-small">
|
||
<Spxl />
|
||
<!-- <div class="common-title flex">
|
||
<div>视频巡逻</div>
|
||
<div class="flex">
|
||
<el-select v-model="spTwoValue" class="mr6" placeholder="Select">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<el-select v-model="spTwoValue" placeholder="Select">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="comom-cnt">
|
||
<VideoPatrols></VideoPatrols>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="search_box">
|
||
<el-input v-model="keywords" style="max-width: 600px" placeholder="请输入关键词">
|
||
<template #append>
|
||
<el-button @click="searchFn" type="primary" style="background-color: #409eff;border: none;color: #fff;">搜索</el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
<div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '442px' }"
|
||
@click="showClassR = !showClassR"></div>
|
||
<div class="asideBox transition" :style="{ right: showClassR ? '-446px' : '0px' }">
|
||
<div class="lineOption">
|
||
<div class="option" @click="openZdXl('ck')">
|
||
<div>巡逻</div>
|
||
<div>路线</div>
|
||
</div>
|
||
<div class="option" @click="openZdXl('zd')">
|
||
<div>制定</div>
|
||
<div>路线</div>
|
||
</div>
|
||
</div>
|
||
<div class="boder-middle">
|
||
<StreetCondition />
|
||
</div>
|
||
<div class="boder-small">
|
||
<div class="common-title flex">
|
||
无人机巡逻
|
||
<el-select v-model="spTwoValue" placeholder="Select">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div class="comom-cnt">
|
||
<DronePatrols></DronePatrols>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
|
||
<CountModel />
|
||
</div>
|
||
<!-- 底部按钮 -->
|
||
<BottomBtn />
|
||
<!-- 指令时间按钮 -->
|
||
<div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
|
||
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisibleZdrw"
|
||
:append-to-body="false">
|
||
<template #reference>
|
||
<div @click="clickAddZdrw" class="imgBox">
|
||
<span>指导巡逻</span>
|
||
</div>
|
||
</template>
|
||
<div class="depBox">
|
||
关键字：
|
||
<div style="margin-left: 14px; width: 80%">
|
||
<el-input v-model="listQueryZd.keyWord" placeholder="请输入关键字"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="depBox">
|
||
是否巡逻：
|
||
<div style="width: 80%">
|
||
<el-select v-model="listQueryZd.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
|
||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||
}}</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="depBox">
|
||
所属部门：
|
||
<MOSTY.Department clearable width="80%" v-model="listQueryZd.ssbmdm" />
|
||
</div>
|
||
<el-radio-group v-model="selectTime_Zd" @change="changeYcTime">
|
||
<el-radio label="今日" />
|
||
<el-radio label="昨日" />
|
||
<el-radio label="本周" />
|
||
<el-radio label="本月" />
|
||
<el-radio label="近30日" />
|
||
<el-radio label="本季度" />
|
||
<el-radio label="近半年" />
|
||
<el-radio label="近一年" />
|
||
<el-radio label="自定义" />
|
||
</el-radio-group>
|
||
<div>
|
||
<el-date-picker v-model="zdTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
|
||
:readonly="zdTime == '自定义' ? false : true" />
|
||
</div>
|
||
<CheckBox :data="zldwList" @changeData="changeDataZldrw" />
|
||
<div class="footerBtns">
|
||
<el-button @click="handleZd">上图</el-button>
|
||
<el-button @click="calcelZd('cancel')">取消</el-button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisible" :append-to-body="false">
|
||
<template #reference>
|
||
<div @click="clickAddEvent" class="imgBox">
|
||
<span>重点巡逻</span>
|
||
</div>
|
||
</template>
|
||
<div class="depBox">
|
||
关键字：
|
||
<div style="margin-left: 14px; width: 80%">
|
||
<el-input v-model="listQuery.keyWord" placeholder="请输入关键字"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="depBox">
|
||
是否巡逻：
|
||
<div style="width: 80%">
|
||
<el-select v-model="listQuery.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
|
||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||
}}</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="depBox">
|
||
所属部门：
|
||
<MOSTY.Department clearable width="80%" v-model="listQuery.ssbmdm" />
|
||
</div>
|
||
<el-radio-group v-model="selectTime_yc" @change="changeYcTime">
|
||
<el-radio label="今日" />
|
||
<el-radio label="昨日" />
|
||
<el-radio label="本周" />
|
||
<el-radio label="本月" />
|
||
<el-radio label="近30日" />
|
||
<el-radio label="本季度" />
|
||
<el-radio label="近半年" />
|
||
<el-radio label="近一年" />
|
||
<el-radio label="自定义" />
|
||
</el-radio-group>
|
||
<div>
|
||
<el-date-picker v-model="fzycTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
|
||
:readonly="selectTime_yc == '自定义' ? false : true" />
|
||
</div>
|
||
<CheckBox :data="timeList" @changeData="changeDataBC" />
|
||
<div class="footerBtns">
|
||
<el-button @click="handleFzyc">上图</el-button>
|
||
<el-button @click="calcelFzyc('cancel')">取消</el-button>
|
||
</div>
|
||
</el-popover>
|
||
<el-popover :width="226" trigger="click" placement="left" v-model:visible="showVisibleWarning"
|
||
:append-to-body="false">
|
||
<template #reference>
|
||
<div @click="showVisibleWarning = !showVisibleWarning" class="imgBox">
|
||
<span>下发指令</span>
|
||
</div>
|
||
</template>
|
||
<div class="footerBtns">
|
||
<el-button @click="clickXfzl">公安资源</el-button>
|
||
<el-button @click="clickQfqz">群防群治人员</el-button>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
<!-- 左边弹窗 -->
|
||
<LeftDialog :isPosition="showClassL" />
|
||
<!-- 中间边弹窗 -->
|
||
<CenterDialog />
|
||
<!-- 右边弹窗 -->
|
||
<RightDialog :isPosition="showClassR" />
|
||
<!-- 警组弹框弹框 -->
|
||
<PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
|
||
<!-- 下发指令 -->
|
||
<XiafaZl />
|
||
<!-- 群防群治 -->
|
||
<QFQZ />
|
||
<!-- 下发指令详情 -->
|
||
<ZlxfList />
|
||
<!-- 犯罪预测 -->
|
||
<FzycDialog v-if="show.fzyc" :data="fzycInfo" />
|
||
<!-- 选房区警情 -->
|
||
<XfqJq />
|
||
<!-- 意见收集 -->
|
||
<YjsjDialog :isShow="show.yisj" v-if="show.yisj" @closeDialog="show.yisj = false" />
|
||
// 指定路线
|
||
<ZdlxDialog :isShow="show.zdlx" v-if="show.zdlx" @closeDialog="show.zdlx = false" />
|
||
</div>
|
||
<teleport to="#app" v-if="visibleDialog">
|
||
<WarningCenter v-model="show.yjzx" v-if="show.yjzx" @closeDialog="visibleDialog = false" />
|
||
<XssbInfo v-model="show.xssb" v-if="show.xssb" @closeDialog="visibleDialog = false" />
|
||
<BbtsInfo v-model="show.bbts" v-if="show.bbts" @closeDialog="visibleDialog = false" />
|
||
<PiliceCaseCount v-model="show.jqtj" v-if="show.jqtj" @closeDialog="visibleDialog = false" />
|
||
<DwryCount v-model="show.dwryts" v-if="show.dwryts" @closeDialog="visibleDialog = false" />
|
||
</teleport>
|
||
<!-- @refresh="getList" -->
|
||
<XfrwDialog ref="xfDiloag"></XfrwDialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import { timeValidate } from "@/utils/tools.js";
|
||
import { qcckGet, qcckPost } from '@/api/qcckApi'
|
||
import { ElNotification } from "element-plus";
|
||
import WarningCenter from "./modelDialog/warningCenter.vue";
|
||
import YjsjDialog from "./modelDialog/yjsjDialog.vue";
|
||
import ZdlxDialog from "./modelDialog/zdlxDialog.vue";
|
||
import XssbInfo from "./modelDialog/xssbInfo.vue";
|
||
import BbtsInfo from "./modelDialog/bbtsInfo.vue";
|
||
import PiliceCaseCount from "./modelDialog/piliceCaseCount.vue";
|
||
import DwryCount from "./modelDialog/dwryCount.vue";
|
||
import { queryListfzyc, queryListZdrw, tbYsSxtList, getSelectVigilant } from "@/api/dpApi/home.js";
|
||
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import emitter from "@/utils/eventBus.js";
|
||
import GdMap from "@/components/GdMap/index.vue";
|
||
import Head from "./layout/head.vue";
|
||
import CheckBox from "@/components/checkBox/index";
|
||
import XiafaZl from "./components/dialog/xiafaZl.vue";
|
||
import QFQZ from "./components/dialog/qfqz.vue";
|
||
import ZlxfList from "./components/dialog/zlxfList.vue";
|
||
import XfqJq from "./components/xfqJq/index.vue";
|
||
import WorkCondition from "./layout/workCondition.vue";
|
||
import Spxl from "./layout/spxl.vue";
|
||
import StreetGroup from "./layout/streetGroup.vue";
|
||
import StreetCondition from "./layout/streetCondition.vue";
|
||
import CountModel from "./layout/statisticsModel.vue";
|
||
import LeftDialog from "./components/leftDialog.vue";
|
||
import CenterDialog from "./components/centerDialog.vue";
|
||
import RightDialog from "./components/rightDialog.vue";
|
||
import BottomBtn from "./layout/bottomBtn.vue";
|
||
import PoliceGroupInfo from "./layout/streetInfo.vue";
|
||
import FzycDialog from "./layout/fzycDialog.vue";
|
||
// import { queryListZdrw } from '@/api/dpApi/home'
|
||
// import XfrwDialog from '@/views/backOfficeSystem/AlarmLinkage/PatrolLine/components/xfrwDialog.vue'
|
||
import {
|
||
onMounted,
|
||
ref,
|
||
onUnmounted,
|
||
watch,
|
||
getCurrentInstance,
|
||
reactive
|
||
} from "vue";
|
||
const visibleDialog = ref(false);
|
||
const keywords = ref("")
|
||
const show = reactive({
|
||
yjzx: false,
|
||
jqtj: false,
|
||
bbts: false, //群访信息
|
||
xssb: false, //线索上报
|
||
dwryts: false, //单位人员统计
|
||
yisj: false, //意见收集
|
||
fzyc: false, //犯罪预测
|
||
zdlx: false, //制定路线
|
||
jzgroup: false //展示警组弹窗
|
||
});
|
||
|
||
const showVisibleZdrw = ref(false);
|
||
const showVisibleWarning = ref(false);
|
||
const { proxy } = getCurrentInstance();
|
||
const { D_BZ_SF, D_BZ_SD } = proxy.$dict("D_BZ_SF", "D_BZ_SD");
|
||
const showVisible = ref(false);
|
||
const selectTime_yc = ref("今日"); //犯罪预测时间类型
|
||
const selectTime_Zd = ref("今日"); //犯罪预测时间类型
|
||
const listQuery = ref({});
|
||
const listQueryZd = ref({});
|
||
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||
const zdTime = ref([getRecentDay(0), getRecentDay(0)]);
|
||
const circleList = ref([]);
|
||
const showClassL = ref(false); //左列折叠
|
||
const showClassR = ref(false); //右列折叠
|
||
const jzxqList = ref({}); //警组列表详情
|
||
const fzycInfo = ref({}); //犯罪预测
|
||
const spvalue = ref("Option1");
|
||
const spTwoValue = ref("Option1");
|
||
const options = ref([
|
||
{
|
||
value: "Option1",
|
||
label: "Option1"
|
||
},
|
||
{
|
||
value: "Option2",
|
||
label: "Option2"
|
||
},
|
||
{
|
||
value: "Option3",
|
||
label: "Option3"
|
||
},
|
||
{
|
||
value: "Option4",
|
||
label: "Option4"
|
||
},
|
||
{
|
||
value: "Option5",
|
||
label: "Option5"
|
||
}
|
||
]);
|
||
const timeList = ref({
|
||
list: [
|
||
"09:00-13:00",
|
||
"13:00-17:00",
|
||
"17:00-21:00",
|
||
"21:00-01:00",
|
||
"01:00-09:00"
|
||
],
|
||
hasChoose: []
|
||
});
|
||
const condition = ref()
|
||
const zldwList = reactive({
|
||
list: [],
|
||
hasChoose: []
|
||
});
|
||
const isShowCount = ref(false); //是否展示统计
|
||
watch(
|
||
() => showClassR.value,
|
||
(val) => {
|
||
emitter.emit("followUp", !val);
|
||
}
|
||
);
|
||
watch(
|
||
() => D_BZ_SD,
|
||
(val) => {
|
||
zldwList.list = val.value.map((v) => {
|
||
return v.label;
|
||
});
|
||
},
|
||
{ immediate: true, deep: true }
|
||
);
|
||
onMounted(() => {
|
||
window.openTk = openTk;
|
||
getListData();
|
||
// 融合通迅
|
||
let idEntityCard = window.localStorage.getItem("idEntityCard");
|
||
let sfrh = window.localStorage.getItem("SFRH");
|
||
if (sfrh == 1 && idEntityCard) {
|
||
try {
|
||
SPPUC.init(
|
||
idEntityCard,
|
||
"",
|
||
function () { },
|
||
function (device_id, type, [lng, lat, speed]) { }
|
||
);
|
||
} catch { }
|
||
}
|
||
// 展示犯罪预测
|
||
emitter.on("showFzycInfo", (res) => {
|
||
show.fzyc = res.type ? true : false;
|
||
fzycInfo.value = res.info;
|
||
});
|
||
|
||
// 展示警组
|
||
emitter.on("showJzInfo", (res) => {
|
||
show.jzgroup = res ? true : false;
|
||
if (res) {
|
||
res.txzb =
|
||
typeof res.txzb == "string"
|
||
? JSON.parse(res.txzb)
|
||
: res.txzb
|
||
? res.txzb
|
||
: [];
|
||
res.pbmj =
|
||
typeof res.pbmj == "string"
|
||
? JSON.parse(res.pbmj)
|
||
: res.pbmj
|
||
? res.pbmj
|
||
: [];
|
||
res.pbfj =
|
||
typeof res.pbfj == "string"
|
||
? JSON.parse(res.pbfj)
|
||
: res.pbfj
|
||
? res.pbfj
|
||
: [];
|
||
res.jyqx =
|
||
typeof res.jyqx == "string"
|
||
? JSON.parse(res.jyqx)
|
||
: res.jyqx
|
||
? res.jyqx
|
||
: [];
|
||
res.pbcl =
|
||
typeof res.pbcl == "string"
|
||
? JSON.parse(res.pbcl)
|
||
: res.pbcl
|
||
? res.pbcl
|
||
: [];
|
||
jzxqList.value = res;
|
||
jzxqList.value.openJyqx = [];
|
||
jzxqList.value.openTxzb = [];
|
||
}
|
||
if (!show.jzgroup) {
|
||
emitter.emit("deleteText"); //清除巡防区文字
|
||
emitter.emit("deletePointArea", "xfq"); //清除巡防区
|
||
}
|
||
});
|
||
//获取条件
|
||
emitter.on("conditions", (val) => {
|
||
condition.value = val
|
||
});
|
||
emitter.on("showWarning", (val) => {
|
||
visibleDialog.value = true;
|
||
switch (val) {
|
||
case "YJZX": //预警中心
|
||
show.yjzx = true;
|
||
break;
|
||
case "JQTJ": //警情统计
|
||
show.jqtj = true;
|
||
break;
|
||
case "QFXS": //群防线索
|
||
show.xssb = true;
|
||
break;
|
||
case "BBTS": //报备提示
|
||
show.bbts = true;
|
||
break;
|
||
case "DWRYTJ": //单位人员统计
|
||
show.dwryts = true;
|
||
break;
|
||
case "YJSJ": //意见收集
|
||
show.yisj = true;
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 线索上报 推送播放
|
||
emitter.on("socketXSSB", (val) => {
|
||
val.tp = val.tp ? val.tp.split(",") : [];
|
||
let html = `
|
||
<div class="newCard">
|
||
<div class="title two_text_detail">${val.nr}</div>
|
||
<div class="text">
|
||
上报人：<span class="info">${val.xm}（ ${val.lxdh} ）</span></span>
|
||
</div>
|
||
<div class="text">
|
||
线索上报类型：<span class="info">${val.lxmc}</span></span>
|
||
</div>
|
||
<div class="text">图片：`;
|
||
val.tp.forEach((it) => {
|
||
html += `<img style="width:60px; height:60px; margin-left:2px;" src="/mosty-base/minio/image/download/${it}" />`;
|
||
});
|
||
html += ` </div></div>`;
|
||
ElNotification({
|
||
type: "warning",
|
||
title: "线索上报",
|
||
showClose: true,
|
||
dangerouslyUseHTMLString: true,
|
||
position: "bottom-right",
|
||
message: html
|
||
}); //消息推送
|
||
});
|
||
});
|
||
|
||
const openTk = (id) => {
|
||
let obj = circleList.value.find((item) => {
|
||
return item.id == id;
|
||
});
|
||
if (obj) emitter.emit("showAj", [obj]);
|
||
};
|
||
// 搜索
|
||
const searchFn = () => {
|
||
emitter.emit("deletePointArea", "search_bxd");
|
||
emitter.emit("removeAll", "search_bxx");
|
||
qcckGet({ keyword: keywords.value }, "/mosty-jmxf/jbldBxx/getBxxByKeyWord").then(res => {
|
||
let lis = res || []
|
||
let coords = []
|
||
let bxd = []
|
||
lis.forEach(v => {
|
||
let obj = { coords: [v.zb], text: v.bxxMc }
|
||
let zbd= v.bxds?v.bxds.map(item => {
|
||
return {
|
||
jd: item.jd,
|
||
wd: item.wd,
|
||
bxdMc:item.bxdMc,
|
||
icon: item.sfdk == '0' || item.sfdk==null ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
|
||
}
|
||
}):[]
|
||
bxd = [...bxd, ...zbd]
|
||
coords.push(obj)
|
||
})
|
||
emitter.emit("echoLine", { coords, width: 4, flag: "search_bxx", type: 'dash', isclear: true, color: '#ff0000' });
|
||
handlePoint(bxd, "", "search_bxd", 0.6, '#FF0000');
|
||
})
|
||
}
|
||
// 获取列表
|
||
function getListData() {
|
||
// , zdjqtjlx: "03", czzt: "0,1"
|
||
let data = { pageSize: 1000, pageNum: 1 };
|
||
getSelectVigilant(data).then((res) => {
|
||
circleList.value = res.records;
|
||
for (let i = 0; i < res.records.length; i++) {
|
||
const el = res.records[i];
|
||
emitter.emit("SsCircle", el);
|
||
let { jd, wd } = el;
|
||
emitter.emit("addPointArea", {
|
||
coords: [{ jd, wd }],
|
||
icon: require("@/assets/point/sos.png"),
|
||
flag: "sosPoint"
|
||
});
|
||
}
|
||
});
|
||
}
|
||
//点击下发指令
|
||
function clickXfzl() {
|
||
emitter.emit("removePlot", "quanXuan");
|
||
emitter.emit("deletePointArea", "centerpoint");
|
||
emitter.emit("closeAllDialog");
|
||
emitter.emit("showZlxf");
|
||
}
|
||
//点击群防群治
|
||
function clickQfqz() {
|
||
emitter.emit("removePlot", "quanXuan");
|
||
emitter.emit("deletePointArea", "centerpoint");
|
||
emitter.emit("closeAllDialog");
|
||
emitter.emit("showQfqz");
|
||
}
|
||
//点击犯罪预测
|
||
function clickAddEvent() {
|
||
showVisible.value = !showVisible.value;
|
||
if (!showVisible.value) calcelFzyc("");
|
||
}
|
||
|
||
//点击指导任务
|
||
function clickAddZdrw() {
|
||
showVisibleZdrw.value = !showVisibleZdrw.value;
|
||
if (!showVisibleZdrw.value) calcelZd("");
|
||
}
|
||
|
||
// 犯罪预测时间选择
|
||
function changeYcTime(val) {
|
||
let time = [];
|
||
switch (val) {
|
||
case "今日":
|
||
time = [getRecentDay(0), getRecentDay(0)];
|
||
break;
|
||
case "昨日":
|
||
time = [getRecentDay(-1), getRecentDay(-1)];
|
||
break;
|
||
case "本周":
|
||
time = getThistWeekDare("week");
|
||
break;
|
||
case "本月":
|
||
time = getThistWeekDare("month");
|
||
break;
|
||
case "近30日":
|
||
time = [getRecentDay(-30), getRecentDay(0)];
|
||
break;
|
||
case "本季度":
|
||
time = getThistWeekDare("quarter");
|
||
break;
|
||
case "近半年":
|
||
time = [getRecentDay(-181), getRecentDay(0)];
|
||
break;
|
||
case "近一年":
|
||
time = [getRecentDay(-365), getRecentDay(0)];
|
||
break;
|
||
}
|
||
fzycTime.value = time;
|
||
}
|
||
|
||
// 取消犯罪预测
|
||
function calcelFzyc(val) {
|
||
fzycTime.value = [getRecentDay(0), getRecentDay(0)];
|
||
listQuery.value = { ssbmdm: "" };
|
||
selectTime_yc.value = "今日";
|
||
showVisible.value = false;
|
||
timeList.value.hasChoose = [];
|
||
}
|
||
// 取消犯罪预测
|
||
function calcelZd(val) {
|
||
zdTime.value = [getRecentDay(0), getRecentDay(0)];
|
||
listQueryZd.value = { ssbmdm: "" };
|
||
selectTime_Zd.value = "今日";
|
||
showVisibleZdrw.value = false;
|
||
zldwList.hasChoose = [];
|
||
}
|
||
// 选择班次
|
||
function changeDataBC(val) {
|
||
timeList.value.hasChoose = val;
|
||
}
|
||
|
||
// 选择指导任务
|
||
function changeDataZldrw(val) {
|
||
zldwList.hasChoose = val;
|
||
}
|
||
|
||
// 指导巡逻
|
||
function handleZd() {
|
||
emitter.emit("deletePointArea", "zdxl_zdrw");
|
||
let list = D_BZ_SD.value.filter((v) => {
|
||
if (zldwList.hasChoose.includes(v.label)) return v;
|
||
});
|
||
|
||
let params = {
|
||
...listQueryZd.value,
|
||
sdList: list.map((v) => {
|
||
return v.value;
|
||
}),
|
||
kssj: zdTime.value[0],
|
||
jssj: zdTime.value[1]
|
||
};
|
||
queryListZdrw(params).then((res) => {
|
||
if (res.length == 0) return false;
|
||
let cc = [];
|
||
let list = res.map((el, index) => {
|
||
let centerPoint = [el.zxX, el.zxY];
|
||
if (index == 0) cc = centerPoint;
|
||
let position = [
|
||
[Number(el.x1), Number(el.y1)],
|
||
[Number(el.x2), Number(el.y2)]
|
||
];
|
||
let text = el.dz + " " + el.xfsd;
|
||
let obj = {
|
||
position: position,
|
||
text,
|
||
id: el.id,
|
||
userData: el,
|
||
sfxl: el.sfxl
|
||
};
|
||
return obj;
|
||
});
|
||
let arr1 = list.filter((v) => {
|
||
return v.sfxl == 1;
|
||
});
|
||
let arr2 = list.filter((v) => {
|
||
return v.sfxl != 1;
|
||
});
|
||
let params1 = {
|
||
fontColor: "#b51209",
|
||
coords: arr2,
|
||
type: "rectangle",
|
||
flag: "zdxl_zdrw",
|
||
color: "rgba(255,255,0,0.5)",
|
||
linecolor: "#f51616"
|
||
};
|
||
let params2 = {
|
||
fontColor: "#b51209",
|
||
coords: arr1,
|
||
type: "rectangle",
|
||
flag: "zdxl_zdrw",
|
||
color: "rgba(255,255,0,0.5)",
|
||
linecolor: "#1C97FF"
|
||
};
|
||
emitter.emit("echoPlane", params1);
|
||
emitter.emit("echoPlane", params2);
|
||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||
});
|
||
}
|
||
|
||
// 犯罪预测
|
||
function handleFzyc() {
|
||
emitter.emit("deletePointArea", "zdxl_fzyc");
|
||
let list = timeList.value.hasChoose.map((item) => {
|
||
return item.slice(0, 2) + item.slice(5, 8);
|
||
});
|
||
let params = {
|
||
...listQuery.value,
|
||
bcList: list,
|
||
kssj: fzycTime.value[0],
|
||
jssj: fzycTime.value[1]
|
||
};
|
||
queryListfzyc(params).then((res) => {
|
||
if (res.length == 0) return false;
|
||
let cc = [];
|
||
let list = res.map((el, index) => {
|
||
let centerPoint = [el.zxX, el.zxY];
|
||
if (index == 0) cc = centerPoint;
|
||
let position = [
|
||
[Number(el.x1), Number(el.y1)],
|
||
[Number(el.x2), Number(el.y2)]
|
||
];
|
||
let text = el.realDate + " " + el.bc;
|
||
let obj = {
|
||
position: position,
|
||
text,
|
||
id: el.id,
|
||
userData: el,
|
||
sfxl: el.sfxl
|
||
};
|
||
return obj;
|
||
});
|
||
let arr1 = list.filter((v) => {
|
||
return v.sfxl == 1;
|
||
});
|
||
let arr2 = list.filter((v) => {
|
||
return v.sfxl != 1;
|
||
});
|
||
let params1 = {
|
||
fontColor: "#12fdb8",
|
||
coords: arr2,
|
||
type: "rectangle",
|
||
flag: "zdxl_fzyc",
|
||
color: "rgba(2,20,51,0.5)",
|
||
linecolor: "#f51616"
|
||
};
|
||
let params2 = {
|
||
fontColor: "#12fdb8",
|
||
coords: arr1,
|
||
type: "rectangle",
|
||
flag: "zdxl_fzyc",
|
||
color: "rgba(2,20,51,0.5)",
|
||
linecolor: "#1C97FF"
|
||
};
|
||
emitter.emit("echoPlane", params1);
|
||
emitter.emit("echoPlane", params2);
|
||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||
});
|
||
}
|
||
const xfDiloag = ref(false)
|
||
//打开定制路线
|
||
const openZdXl = (val) => {
|
||
if (val == 'zd') {
|
||
show.zdlx = true;
|
||
} else {
|
||
emitter.emit("openZdXl", { show: true, type: 'ck' });
|
||
}
|
||
};
|
||
// 处理撒点
|
||
function handlePoint(arr, icon, flag, scale, fontColor) {
|
||
let list = arr.filter((item) => {
|
||
item.identification = flag;
|
||
return item.jd && item.wd;
|
||
});
|
||
if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
|
||
}
|
||
onUnmounted(() => {
|
||
emitter.off("showWarning");
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/homeScreen.scss";
|
||
|
||
// 中间统计数据
|
||
.statisModel {
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.Rank {
|
||
left: 500px;
|
||
position: absolute;
|
||
z-index: 999;
|
||
color: #010f30;
|
||
font-size: 20px;
|
||
top: 100px;
|
||
left: 390px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.showCount {
|
||
width: 1100px;
|
||
height: 90px;
|
||
transition: height 1s;
|
||
-webkit-transition: height 1s;
|
||
}
|
||
|
||
.heddenCount {
|
||
width: 1100px;
|
||
height: 0px;
|
||
transition: height 1s;
|
||
-webkit-transition: height 1s;
|
||
}
|
||
|
||
.transition {
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.lineOption {
|
||
position: absolute;
|
||
z-index: 99;
|
||
bottom: 100px;
|
||
left: -100px;
|
||
|
||
.option {
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: url('~@/assets/images/quan.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
width: 80px;
|
||
margin-bottom: 10px;
|
||
margin: auto;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
margin: auto 0;
|
||
color: #0f6cd4;
|
||
|
||
div {
|
||
width: 99%;
|
||
text-align: center;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.depBox {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #00bfff;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.addBox {
|
||
color: #fff;
|
||
|
||
::v-deep .el-radio {
|
||
width: 74px;
|
||
margin-right: 15px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.footerBtns {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
background-color: transparent;
|
||
border: 1px solid #224ab5;
|
||
// color: #fff;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
::v-deep .el-range-editor .el-range-input {
|
||
background: transparent;
|
||
// color: #fff;
|
||
}
|
||
|
||
::v-deep .el-date-editor .el-range-separator {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-checkbox {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-popper.is-light {
|
||
background: #00314e;
|
||
border: 1px solid #00314e;
|
||
}
|
||
|
||
::v-deep .el-popper.is-light .el-popper__arrow::before {
|
||
background: #00314e;
|
||
}
|
||
|
||
.common-title {
|
||
padding: 0 10px 0 54px;
|
||
box-sizing: border-box;
|
||
font-size: 22px;
|
||
font-family: "YSBTH";
|
||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||
-webkit-background-clip: text;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.comom-cnt {
|
||
height: calc(100% - 30px);
|
||
padding: 4px 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
::v-deep .el-select .el-input__inner {
|
||
// width: 100px;
|
||
height: 30px;
|
||
// background: #061628;
|
||
// background: url("~@/assets/images/streetBi/xzk.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
// border: 1px solid #0072ff;
|
||
border-radius: 2px;
|
||
// color: #fff !important;
|
||
}
|
||
|
||
.search_box {
|
||
position: absolute;
|
||
top: 90px;
|
||
left: 448px;
|
||
z-index: 99;
|
||
|
||
::v-deep .el-input__inner {
|
||
color: #606266 !important;
|
||
width: 20vw;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.el-notification {
|
||
background: #052955;
|
||
border: 1px solid #ff0526;
|
||
box-shadow: inset 0 0 10px #ff0526;
|
||
}
|
||
|
||
.el-notification__content,
|
||
.el-notification__title {
|
||
color: #fff;
|
||
}
|
||
|
||
.newCard {
|
||
line-height: 20px;
|
||
font-size: 14px;
|
||
background: #052955;
|
||
}
|
||
|
||
.newCard .text {
|
||
font-size: 12px;
|
||
color: #6585af;
|
||
}
|
||
|
||
.newCard .text span {
|
||
color: #0093ed;
|
||
}
|
||
|
||
.newCard .picture {
|
||
display: flex;
|
||
}
|
||
|
||
.newCard .picture .pictureLeft {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.el-notification.right {
|
||
right: 410px;
|
||
}
|
||
|
||
.el-notification .el-notification--warning {
|
||
color: #ff0526;
|
||
}
|
||
|
||
.el-notification .el-notification__closeBtn {
|
||
color: #fff;
|
||
top: 4px;
|
||
right: 4px;
|
||
}
|
||
</style>
|